Einen Buchstaben zum Objekt machen

[Linuchs]

Moin,

für mein Help-System berechne ich mit Javasvript die x- y- Position, an der geklickt wurde, um dort das in Bezug auf body absolut positionierte Info-Feld zu platzieren.

Nun muss man ja die Parent-Objekte hochhecheln, um die x- y- Koordinaten zu bekommen:

function getHelptext( obj, host, owner_id, kw, ll, feldname )
{
  // x- y-Position des auslösenden Elements ermitteln http://droeppez.de/download/js-tut/js-tut/tutorial/position.html 2016-03-15
  //alert ( typeof obj );
  //alert ( obj.tagName );

  var elem = obj, tagname = "", x=0, y=0;
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
    tagname = elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */
    if (tagname=="BODY")
      elem=0;
    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }
  //alert ( "X-Position = [" + x+"]px Y-Position = [" +y +"]px" );
  document.getElementById( "helptext" ).style.left = x +"px";
  document.getElementById( "helptext" ).style.top  = (y +20) +"px";
...
}

Da ich die Felder mit Buchstaben A .. Z zum Klicken markieren möchte, müssen die ein Objekt sein. <b></b> ist aber keins. Habe provisorisch <img ... ohne src= genommen. Funktioniert, ist aber nicht sauber.

Wie wird ein Buchstabe zum Objekt im Sinn von Javascript?

Linuchs

[Orlok]

Hallo Linuchs

Habe es nur mal kurz überflogen, aber vielleicht suchst du event.clientX und event.clientY?

window.addEventListener('click', function (event) {
  var x = event.clientX, y = event.clientY;
});

Das gibt dir die X/Y-Koordinaten des erfolgten Klicks in Bezug auf den Viewport.

Viele Grüße,

Orlok

[Linuchs]

Hallo Orlok,

danke, ich habe das Hinzufügen von Event Listenern nun umgesetzt. Bei den Eingabefeldern platziere ich die Buchstaben:

<b id="intern_kz">A</b>

Am Ende der HTML-Seite lasse ich eine Schleife laufen, die jedem (Help-)Buchstaben einen Event-Listener zuordnet:

obj_help = document.getElementsByTagName( "b" );
for ( i=0; i<obj_help.length; i++ ) {
  if ( obj_help[i].id ) {
    obj_help[i].addEventListener('click', function (event) {
      getHelptextXY( "[HOST]", 0, "[kw]", "[ll]", this.id, event.clientX, event.clientY );
    });
  }
}

Klappt prima und ist viel einfacher, als jedem Buchstaben einzeln das Klick Event zu verpassen.

Linuchs

[Marcus Strauß]

Wie wird ein Buchstabe zum Objekt im Sinn von Javascript?

Gar nicht, denn text bleibt nun mal text.

ich verstehe auch deine ganze Aktion nicht. warum du einen Buchstaben nur zum markieren zum objekt machen willst. das Tutorial was du angibst, legt dir doch schon alles vor die Nase was du bräuchtest um einen Buchstaben über ein Element zu markieren.

Nimm ein <table> Element mit einer Zeile und 26 Zellen und du solltest kein Problem haben den jeweiligen Buchstaben zu markieren.

[Regina Schlauklug]

Wie wird ein Buchstabe zum Objekt im Sinn von Javascript?

In dem man ihn sauber als Button oder als Span verpackt. Falls Du einen String hast: string.split("") verhilft Dir zu einem Array, den Du Zeichen für Zeichen verpackt ausgeben kannst.

[Gunnar Bittersmann]

@@Regina Schlauklug

In dem man ihn sauber als Button oder als Span verpackt.

Ersteres. span mit click-Event ist nicht tastatur-bedienbar. Um das barrierefrei zu machen, wären einige Anstrengungen nötig.

Besser button verwenden; Rahmen und Hintergrundfarbe ggfs. mit CSS entfernen.

LLAP 🖖