maik87
Sep 23, 2015
view4087
view21
0
Goto Top

Mit JavaScript auf ID zugreifen

GermansolvedQuestionJavaScriptDevelopment
Hallo zusammen,

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

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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 283689

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

Printed on: April 25, 2024 at 09:04 o'clock

21 Comments
Latest comment
Goto Top
Member: colinardo
Solution colinardo Sep 23, 2015 updated at 11:44:22 (UTC)
Goto Top
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 ...
Member: Arano
Solution Arano Sep 23, 2015 updated at 11:44:27 (UTC)
Goto Top
Hallo Maik87.

  id="3"
ist ungültig !
s. Universalattribut ID - selfHTML
Edit: Hm... naja gut, ab HTML5 geht wohl auch das face-wink

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
Member: Maik87
Maik87 Sep 23, 2015 at 11:27:14 (UTC)
Goto Top
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.
Member: Maik87
Maik87 Sep 23, 2015 at 11:29:17 (UTC)
Goto Top
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.
Member: colinardo
colinardo Sep 23, 2015 updated at 11:40:19 (UTC)
Goto Top
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 ...
heart1
Member: Maik87
Maik87 Sep 23, 2015 at 11:42:00 (UTC)
Goto Top
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?
Member: colinardo
colinardo Sep 23, 2015 updated at 11:47:37 (UTC)
Goto Top
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.
Member: Maik87
Maik87 Sep 23, 2015 at 11:47:51 (UTC)
Goto Top
Also die üblichen Verdächtigen und kein "Damit hab ich es gelernt - 1A" dabei.
Ich wurschtel mich bei Zeiten mal dadurch...

Danke!
Member: Maik87
Maik87 Sep 23, 2015 at 14:03:41 (UTC)
Goto Top
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
Member: colinardo
colinardo Sep 23, 2015 updated at 15:49:52 (UTC)
Goto Top
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 face-smile 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
Member: Maik87
Maik87 Sep 23, 2015 at 15:50:55 (UTC)
Goto Top
Genau so etwas versuche ich seit fast zwei Stunden auf die Beine zu stellen face-smile

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...
Member: colinardo
colinardo Sep 23, 2015 updated at 16:11:45 (UTC)
Goto Top
Dir sind da ein paar gravierende Fehler unterlaufen:
Wobei es ganz korrekt (wenn die Syntax stimmt) so lauten müsste:
Öhm wohl eher nicht face-smile
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
Member: Maik87
Maik87 Sep 23, 2015 at 16:11:16 (UTC)
Goto Top
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 face-sad
Member: Maik87
Maik87 Sep 23, 2015 at 16:13:19 (UTC)
Goto Top
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.
Member: colinardo
colinardo Sep 23, 2015 updated at 16:16:57 (UTC)
Goto Top
Zitat von @Maik87:
Egal was ich mache, treffer ist immer -1 face-sad
Weil du das Array innerhalb des Switch Konstrukts deklarierst und nicht außerhalb, deswegen ist die Variable außerhalb nicht sichtbar face-wink
Es gibt noch viel zu Lernen ... http://www.w3schools.com/js/js_switch.asp

Mein zweites Beispiel hast du auch gesehen ?
Member: Maik87
Maik87 Sep 23, 2015 updated at 16:20:13 (UTC)
Goto Top
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 face-smile


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.
Member: colinardo
colinardo Sep 23, 2015 updated at 16:22:38 (UTC)
Goto Top
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...
Member: Maik87
Maik87 Sep 23, 2015 at 16:22:38 (UTC)
Goto Top
Hab nun var korrekt vor dem Switch und im Switch nur noch korrekt = [...] - trotzdem weiterhin -1.
Member: colinardo
colinardo Sep 23, 2015 updated at 16:27:59 (UTC)
Goto Top
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.
Member: Maik87
Maik87 Sep 23, 2015 at 16:25:56 (UTC)
Goto Top
Sehr gute Frage!
Muss nun aber leider los... Melde mich morgen wieder!


DANKE!!
Member: Maik87
Maik87 Sep 28, 2015 at 10:35:45 (UTC)
Goto Top
Läuft nun einwandfrei.
Danke für die Hilfe!!
GermansolvedQuestionJavaScriptDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments