getAttribute abbr Title auslesen und darstellen

[Zejo]

Hallo ich möchte beim Tag <abbr> den Title auslesen und darstellen wenn ein Event stattfindet (z.B. onclick).

Ich habe soweit alles in eine auslösende Funktion gebracht und möchte jetzt z.B. beim Klick auf den <abbr> Tag, dass genau der dazugehörige Title ausgeben wird (z.B. mit document.write) wird.

Nun wird ja beim document.getElementsbyTagName() die Tags als arrays deklariert. Wie kann ich nun das jeweilige array ansprechen, z.B. beim Klick auf das 4 <abbr> kommt document.getElementsbyTagName ("abbr")[3];
Ich denke irgendwie mit "this" bin aber noch nicht dahintergekommen.

Danke für jede Hilfe.

Code bis jetzt:

<script>
window.onload = initFunction;
function initFunction() {
document.getElementsByTagName("abbr")[0].onclick = auslesen;
}
function auslesen() {
var a= document.getElementsByTagName("abbr")[0].getAttribute("title");
document.write("<br>"+ a);
}
</script>

 

[Tronjer]

Einfacher mit jQuery:

<abbr title="foo"></abbr>

$("abbr").on("click", function() {
  var myTitle = $(this).attr("title");
  // tu was mit myTitle
})

 

[Zejo]

Ich finde es toll, dass du jQuery kannst.
Und ich weiß, dass man jeden Javascript Code mit jquery verkürzen kann.

Da möchte ich auch noch hin. Aber vorher möchte ich erst mal richtig Javascript lernen, deswegen nützt mir das jquery Beispiel gelinde gesagt gar nichts.
mal sehen ob ich das wenigstens irgendwie wieder in normales Javascript umwandeln kann.

 

[Tronjer]

So lange du das mit dem this verstanden hast.

 

[Gelöschtes Mitglied 3007]

Ich finde es toll, dass du jQuery kannst.
Und ich weiß, dass man jeden Javascript Code mit jquery verkürzen kann.

Da möchte ich auch noch hin. Aber vorher möchte ich erst mal richtig Javascript lernen, deswegen nützt mir das jquery Beispiel gelinde gesagt gar nichts.
mal sehen ob ich das wenigstens irgendwie wieder in normales Javascript umwandeln kann.

Zejo, mein Mann! :-D
Ich werde für dich in Code sprechen und es nicht alles erklären, aber du wirst sicher motiviert genug sein dir die Bedeutung der einzelnen Funktionen zurecht zu suchen. Bei größeren Fragen kannst gern schreiben.

window.onload = function () {
    var i, elements, callback;
   
    elements = document.getElementsByTagName('abbr');
   
    callback = function (event) {
        console.log(this, event, this.getAttribute('title'));
    };
   
    for (i = 0; i < elements.length; i += 1) {
        elements[i].onclick = callback;
    }
};

Wegen so ein wenig Javascript Code extra jQuery einzubinden wäre nebenbei total schwachsinnig. Wenn du viele Sachen auf deiner Homepage machen willst kann es sich aber trotzdem lohnen jQuery zu benutzen.

lg :)

 

[scbawik]

Zejo, mein Mann! :-D
Ich werde für dich in Code sprechen und es nicht alles erklären, aber du wirst sicher motiviert genug sein dir die Bedeutung der einzelnen Funktionen zurecht zu suchen. Bei größeren Fragen kannst gern schreiben.

window.onload = function () {
    var i, elements, callback;
 
    elements = document.getElementsByTagName('abbr');
 
    callback = function (event) {
        console.log(this, event, this.getAttribute('title'));
    };
 
    for (i = 0; i < elements.length; i += 1) {
        elements[i].onclick = callback;
    }
};

Wegen so ein wenig Javascript Code extra jQuery einzubinden wäre nebenbei total schwachsinnig. Wenn du viele Sachen auf deiner Homepage machen willst kann es sich aber trotzdem lohnen jQuery zu benutzen.

lg :)

Du musst es ja wissen du Held …
Was mit jQuery dann 100 Zeilen sind, sind in normalem JavaScript gleich mal locker das doppelte wenn nicht dreifache.
Sieht man ja auch an deinem Beispiel verglichen mit @Tronjer seinem. Nur hat er sogar noch HTML und einen Kommentar in seinen 6 Zeilen stehen - du nicht.

Wenn du dir sorgen wegen der brutalen Ladezeiten machst die jQuery verursacht, verwende eben ein CDN.

Deshalb meine Meinung: Es gibt keinen Grund, jQuery oder ein vergleichbares Framework, nicht standardmäßig zu verwenden.

Klar, sollte es jetzt wirklich nur dieser Code sein, ist es noch ok in purem JavaScript. Aber ich bezweifle dass es mit dem console.log enden wird.
Abgesehen davon lernt man auch mit jQuery JavaScript - ist ja das selbe.

 

[Chronos]

Du musst es ja wissen du Held …
Abgesehen davon lernt man auch mit jQuery JavaScript - ist ja das selbe.

Finde ich überhaupt nicht, ich habe auch den Fehler gemacht, direkt jQuery zu nehmen und hatte dann meine Probleme.
Besser ist, man lernt erst mal gescheit JavaScript und wenn man das halbwegs beherrscht wagt man sich an Frameworks.
Man kann auch nicht immer über all davon ausgehen jQuery nutzen zu können oder die aktuellste Version, daher sollte man schon wissen wie es ohne geht.

 

[Tronjer]

Für jemanden ohne Programmierkenntnisse führt der kürzeste Weg zu JavaScript über PHP und jQuery.

 

[Gelöschtes Mitglied 3007]

Genau der gegenteiligen Meinung. Jemand der JavaScript lernen will fängt am besten an die Sprache an sich zu benutzen. Auf diese Weise lernt man gleich alle Probleme die einem die Browser entgegenwerfen zu umgehen (, gründliches Testen ist natürlich voraussetzung).

Wer allerdings nur ein paar schöne Effeckte auf seiner Seite habe will, oder sachen schnell umsetzen will ohne sich großartig mit der Sprache auseinandersetzen zu müssen, sollte lieber jQuery benutzen. Das spaart euch nicht nur Zeit sondern sichert auch meinen Job! :-D

 

[Tronjer]

Jemand der JavaScript lernen will fängt am besten an die Sprache an sich zu benutzen.

Womit er es sich aber unnötig schwer macht, weil vanilla JS viele Funktionen vermissen lässt, die in Frameworks oder anderen Sprachen standardmäßig vorhanden sind und nicht erst mit prototyping erzeugt werden müssen.

Nebenbei bemerkt ist dein Code ein Beispiel für schlechtes JavaScript. Du schreibst drei Variablen in den globalen Scope, während meine in der Funktion gekapselt ist.

 

[Zejo]

Zunächst einmal danke für die weiteren Tipps hier.

Dann zum Thema jquery. Ich dachte das ist hier ein Javascript Forum. Wenn jemand bei CSS eine Frage stellt dann , dann antworte ich doch auch nicht und sage in LESS oder SASS geht das viel kürzer.
Zum Glück weiß ich z.B., dass man jquery erst mal in die Webseite einbinden muss. Für jemand der gar keine Ahnung hat, sind das alles böhmische Dörfer.

Klar möchte ich dann auch mal auf jquery umsteigen, ich habe aber gemerkt, ohne vorher wenigstens ein wenig Javascript Syntax zu verstehen, kapiert man gar nichts. Ich hab mal ein Lernvideo zu jquery gehabt. Ich hab da gar nichts verstanden.

Den Tip von Slibbo finde ich interessant. Ich hab aber gestern noch ne ganze Weile im Internet gesurft und hab ne Lösung gefunden. Ich verstehe den Code soweit ganz gut bis auf eine Zeile.

<script>


var abbr=document.getElementsByTagName("abbr");
  for(var i=0; i<abbr.length; i++)
  {
  abbr[i].abbrnum=i;
  abbr[i].onclick=function()
  {
var titel = document.getElementsByTagName("abbr")[this.abbrnum].getAttribute("title");
document.getElementById("ausgabe").innerHTML =titel;
}
}

</script>

Was bewirkt hier das "abbr.abbrnum=i" ?

Wäre nett, wenn das mir jemand noch ohne jquery erklären könnte? ;-)

 

[Gelöschtes Mitglied 3007]

Es bewirkt in manchen Browsern, nicht in allen, dass zu dem Entsprechendem Element ein Wert hinzugefügt wird, welcher später wieder abgerufen wird um das Entsprechende Element anzusprechen.

Dieses ist aber total unnötig. Zuerst einmal empfehle ich dir, falls du den neuen FireFox oder Google Chrome benutzt F12 zu drücken und in dem kleinen Fenster was sich dann öfnet auf den Tab "Konsole" zu gehen. In diesem Fenster bekommst du Log ausgaben, wenn du in JavaScript folgendes schreibst.

console.log('asd', 1, [1, 'asd'], {test: 5});

Nun zum wichtigen Teil. Wenn du einem Element einen Callback in irgendeiner "on" funktion wie z.b. onclick oder onmouseover zuweist kannst du in selbigem callback direkt mit "this" auf das entsprechende Element zugreifen.

In deinem Code kannst du also anstadt

document.getElementsByTagName("abbr")[this.abbrnum].getAttribute("title");

zu schreiben genau so gut folgendes schreiben

this.getAttribute('title');

Ps: Ja ne ist klar Tronjer... ich hasse es wirklich wie solche sachen hier immer in Grundlagendisktusionen ausaten :-D es ist ganz einfach. Nen scheiß habe ich irgendeine Variable in den Globalen Scope geschrieben. Ich habe ne Variable in den Scope des onclick callbacks von "window" geschrieben welche nicht von außen erreichbar ist.