23.09.2015

4448

Mit JavaScript auf ID zugreifen

Hallo zusammen,

ich versuche gerade ein JavaScript umzubasteln. Leider schwerer als gedacht, da ich von JS kaum/keine Ahnung habe

Ich hänge derzeit an folgendem Problem:

<p class="address" id="3">       
<span class="title">Testeintrag</span> <br><span class="id">3</span> <br>  
</p>

Wie bekomme ich nun die "3" (egal ob von "p class" oder "span class") ausgelesen? Das "P-Objekt" ist bereits in der Variable copy erfasst - ich muss nur irgendwie an die Eigenschaften kommen.

Danke euch!

Grüße
Maik87

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 283689

Url: https://administrator.de/contentid/283689

Ausgedruckt am: 21.11.2024 um 16:11 Uhr

21 Kommentare

Neuester Kommentar

Hallo Maik87,
hiermit kommst du an den Text-Inhalt von <span class="id">3</span>, wenn es das war was du wolltest...

<script type="text/javascript">  
    var inhalt = document.getElementById('3').getElementsByClassName('id').innerText;  
    alert(inhalt);
</script>

Grüße Uwe

-edit- wenn du stattdessen das Attribut des ersten Elements P-Elements meinst siehe @Arano ...

Hallo Maik87.

  id="3"

ist ungültig !
s. Universalattribut ID - selfHTML
Edit: Hm... naja gut, ab HTML5 geht wohl auch das

Auf den Werte des Attributs ID kannst du über das Attribut ID zugreifen wenn du das P als Objekt hast: copy.id

<html>
  <head>
    <script type="text/javascript">  
      <!--
        function init()
        {
          copy = document.getElementById("id3"); 
          alert( copy.id );
        }
      -->
    </script>
  </head>
  <body onload="init();">  
  
  <p class="address" id="id3">  
    <span class="title">Testeintrag</span> <br><span class="id">3</span>  
  </p>
  
  </body>
</html>

Erzeugt mir ein Popup mit dem Text "id3"

~Arano

Hallo Uwe,

danke für deine Antwort. Leider ist aber die 3 genau der Wert, den ich auslesen möchte. Das Objekt ist - so wie ich es im Eingangspost beschrieben habe - so schon komplett. Über Sinn oder Unsinn kann man sich streiten. Da ich keine Ahnung habe, weiß ich auch nicht, ob man es sinnvoller programmieren könnte. Kam so vom Vorgänger...

Es ist ein Objekt, welches per Drag&Drop aus einer Liste genommen und verschoben werden kann. Das Ziel wird mit vom Script mit den selben Infos gefüllt wie der Start, von wo ich angefangen habe zu ziehen.

Ich möchte nun die ID auslesen und erkennen, ob ich die 3, die 4, die 5 oder sonst etwas gezogen haben.

Hallo Arano,

auch an dich ein dickes Danke!

Aber wie oben schon geschrieben, stehe ich vor der Aufgabe, dass die 3 auch eine 4, eine 5, eine 6 und alles andere sein kann. "getElementById("id3")" klappt also leider nicht pauschal.

Zitat von @Maik87:
Aber wie oben schon geschrieben, stehe ich vor der Aufgabe, dass die 3 auch eine 4, eine 5, eine 6 und alles andere sein kann. "getElementById("id3")" klappt also leider nicht pauschal.

Wenn du sagst du hast das Objekt schon in einer Variablen, dann greifst du so wie Arano schon geschrieben hat auf die ID des Elementes zu.

Wenn du das Objekt mit der Klasse address noch nicht in einer Variablen hast und es das erste Element dieser Klasse ist, dann so:

alert(document.getElementsByClassName("address").id);  

Ansonsten ist deine Beschreibung leider etwas zu unpräzise und aus dem Kontext gerissen ...

Hab es durch Testen auf Grundlage deiner Hilfe zum Laufen bekommen:

alert(copy.getElementsByClassName('id').innerHTML);  

Läuft - danke!!

Kannst du ein gutes Tutorial oder Buch empfehlen, damit ich mich mal mit JS auseinandersetzen kann?

Zitat von @Maik87:
Läuft - danke!!

Keine Ursache.

Kannst du ein gutes Tutorial oder Buch empfehlen, damit ich mich mal mit JS auseinandersetzen kann?

Bücher habe ich selbst nie gebraucht, aber das Web ist ja voll von Stoff zum Thema:

Arbeite dich da Schritt für Schritt durch, dann kommt die Erfahrung von selbst.

Also die üblichen Verdächtigen und kein "Damit hab ich es gelernt - 1A" dabei.
Ich wurschtel mich bei Zeiten mal dadurch...

Danke!

Ich möchte noch einmal nachhaken, da im weiteren Verlauf noch etwas angefallen ist:

Es handelt sich bei dem Projekt um eine Art Puzzle. Ich habe zwölf Antworten (siehe Eingangspost) und zwölf Felder, auf die ich diese per Drag&Drop ziehen kann. Diese sind in vier Kathegorien eingeteilt, wobei die Antwort nur auf einem Feld der richtigen Kathegorie hält und sonst wieder abfällt. Dieses habe ich inzwischen über eine verschachtelte if-Abfrage zum laufen bekommen (bitte nicht lachen):

function checkTarget( target, antwort){if((target == 'w1' && (antwort == 1 || antwort == 2 || antwort == 3)) || (target == 'w2' && (antwort == 1 || antwort == 2 || antwort == 3))  

[...] {return true; }else{return false;}}

Wie kann ich das ganze nun in schön programmieren?
Meine Felder in den Kathegorien beginnen immer mit dem selben Anfangsbuchstaben und sind durchnummeriert.

Ich würde die Funktion dynamisch mit PHP erstellen (um die richtigen Werte aus der Datenbank zu hinterlegen).
Zu jedem Buchstaben werden die richtigen Antwortmöglichkeiten in einem Array hinterlegt.
Nun soll geprüft werden, ob a) die übergebene Antwort für das jeweilige Target erlaubt ist (der Anfangsbuchstabe, hier "w" ist entscheidend) und ob b) die Antwort nicht schon in einem anderen Target (hier w1-w3) verwendet wurde.

Ich hoffe ihr versteht mich...

Wäre jemand so nett und tippt mir diese paar Zeilen zusammen? Ich habe da (noch) absolut keine Ahnung von...

DANKE!!!

Maik87

Etwa in dieser Art ? In die Arrays schreibst du die jeweils möglichen Antworten.

function checkTarget(target, antwort){
 switch(target){
   case 'w1':  
     var korrekt = [1,2,3];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   case 'w2':  
     var korrekt = [4,5];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   case 'w3':  
     var korrekt = [6,7];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   default:
     return false;
 }
}
alert(checkTarget('w2',4));  

Das ganze kann man natürlich auch gleich in ein verschachteltes Array schreiben und das abfragen, wie man Lustig ist

Ich wollte dich aber nicht gleich zu Beginn überfordern.

Hier noch eine andere Variante...

function checkTarget(target, antwort){
  var answers = {
    'w1': [1,2,3],  
    'w2': [4,5],  
    'w3': [6,7]  
  }
  try{
    return (answers[target].indexOf(antwort) > -1) ? true :false;  
  }catch(err){
    return false;
  }
}

alert(checkTarget('w1',2));  

Grüße Uwe

Genau so etwas versuche ich seit fast zwei Stunden auf die Beine zu stellen

Wobei es ganz korrekt (wenn die Syntax stimmt) so lauten müsste:

function checkTarget(target, antwort){
 switch(target){
   case 'w1':  
   case 'w2':  
   case 'w3':  
     var korrekt = [1,2,3];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   case d1':  
   case d2':  
   case d2':  
     var korrekt = [4,5];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   case 'wd1':  
   case 'wd2:  
   case 'wd3':  
     var korrekt = [5,7];
     return (korrekt.indexOf(antwort) > -1)? true: false;
     break;
   default:
     return false;
 }
}
alert(checkTarget('w2',4));  

Ich scheitere in meinen Versuchen gerade daran, dass nach dem Befüllen des Arrays das Script nicht mehr läuft. Dachte schon, dass die mehrfache Deklaration Schuld daran sei. War grad dabei zu testen, was passiert, wenn ich das Array zunächst einmalig leer anlege und nach Anwendungsfall mit push entsprechend fülle. Klappte aber auch nicht wirklich...

Dir sind da ein paar gravierende Fehler unterlaufen:

Wobei es ganz korrekt (wenn die Syntax stimmt) so lauten müsste:

Öhm wohl eher nicht

Zeilen 9,10,11 fehlen die Hochkommas. und die break Statements. Zusätzlich sind die "case" Einträge die du unterscheidest alle doppelt... das wird so in dieser Art nichts ...
http://www.w3schools.com/js/js_switch.asp

Ich habe mal etwas nach der Variante angepasst:

function checkTarget(feld, antwort){
switch(feld){
case 'w1':  
var korrekt = [1,2,3];
break;

case 'd1':  
var korrekt = [13,14,15];
break;

case 'wd1':  
var korrekt = [7,8,9,10,11,12,17];
break;

case 'c1':  
var korrekt = [4,5,6,16];
break;
}

var treffer = korrekt.indexOf(antwort);
alert(treffer);
return true;
}

Egal was ich mache, treffer ist immer -1

Flüchtigkeitsfehler - sorry!
Die breaks hab ich bewusst weggelassen (Beispiel oben bisher ungetestet). Bin es auch PHP so gewoht, dass ich damit ein "w1 oder w2 oder w3" erzeugen kann.

Zitat von @Maik87:
Egal was ich mache, treffer ist immer -1

Weil du das Array innerhalb des Switch Konstrukts deklarierst und nicht außerhalb, deswegen ist die Variable außerhalb nicht sichtbar

Es gibt noch viel zu Lernen ... http://www.w3schools.com/js/js_switch.asp

Mein zweites Beispiel hast du auch gesehen ?

Na toll.. Denkste "kannste PHP, C und sowas, dann geht JS von selbst" ...
Also muss ich im Switch doch schon mit return aus der Funktion raus und die weiteren Prüfungen in einer extra Funktions durchführen. Oder bekomme ich das Array irgendwie aus dem Switch raus überführt?

Ja, das zweite Beispiel hab ich auch gesehen. Wollte aber erstmal mit dem längeren, aber besser zu verstehenden anfangen

Edit:
In deinem Link ist es doch auch so...
a) werden dort mehrere case-Anweisungen als ODER direkt untereinander geschrieben
b) wird im Switch eine Variable gefüllt und außerhalb weiterverwendet.

Zitat von @Maik87:
Also muss ich im Switch doch schon mit return aus der Funktion raus

nö, einfach vor dem Switch die Variable deklarieren,

var korrekt;

und dann im Switch Konstrukt die Variable nur "füllen".

korrekt = ........;

Das ist aber fast in jeder Sprache gleich (Variable-Scope).
Oder gleich zu meiner zweiten kürzeren Variante greifen...

Hab nun var korrekt vor dem Switch und im Switch nur noch korrekt = [...] - trotzdem weiterhin -1.

Zitat von @Maik87:
Hab nun var korrekt vor dem Switch und im Switch nur noch korrekt = [...] - trotzdem weiterhin -1.

Ist deine Variable antwort ein String oder ein Integer ? Wenn es ein String ist musst du die einzelnen Elemente in den Arrays in Anführungszeichen setzen, oder vorher in Integer umwandeln (antwort = parseInt(antwort)).

p.s. Mutiert das hier jetzt zu einem JavaScript-Kurs ???
Das hat jetzt nun rein gar nichts mehr mit der Frage zu tun ...

Bitte stelle dazu dann eine neue Frage im Forum. Danke.