2017-01-13 3 views
0

Ich kann in diesem Fall keine Logik von JavaScript erstellen. Warum ändert sich "Dollar" nicht zu "Dolor" und "Dollar" zu "Dolor"? Aber gleichzeitig passt das Hintergrund-Styling. Was ist los mit meiner Logik? Vielen Dank.querySelectorAll und innerHTML Logik

var dollarEls = document.querySelectorAll("li .dollar"); 
 
     for (var i = 0; i < dollarEls.length; i++) { 
 
       if(dollarEls[i] == "Dollar") { 
 
        dollarEls[i].innerHTML = "Dolor"; 
 
       }else if (dollarEls[i] == "dollar") { 
 
        dollarEls[i].innerHTML = "dolor"; 
 
       }else { 
 
        dollarEls[i].style.backgroundColor = "orange"; 
 
       } 
 
     }
<ul> 
 
    <li>Lorem ipsum <span class="dollar">Dollar</span> sit amet, consectetur adipiscing elit. Pellentesque mi tortor, convallis vitae rhoncus suscipit, finibus a dui. Quisque congue vulputate dolor vel facilisis. Nunc non ipsum porta, efficitur odio euismod, facilisis erat.</li> 
 

 
    <li>Nam <span class="dollar">Dollar</span> ante, faucibus nec enim consequat, auctor faucibus nulla. Etiam bibendum commodo elit at euismod. Nullam elementum varius ligula sit amet accumsan. Nunc arcu nunc, mattis quis mollis eget, ultricies a nisi. Aliquam maximus luctus magna, vitae feugiat <span class="dollar">dollar</span> tempus non. Nulla dui ante, tempus at justo ut, ultricies cursus mauris.</li> 
 
</ul>

+1

Abgesehen von der offensichtlichen Fehler, don benutze 'innerHTML' nicht, sondern' textContent'. – trincot

+2

Ich bin verwirrt. Sie wissen offensichtlich, dass Sie 'innerHTML' verwenden können, um den Wert des Elements festzulegen. Warum würdest du das nicht auch verwenden, um den Wert des Elements zu untersuchen? Wie auch immer, warum genau brauchst du das? –

+0

Wenn um ehrlich zu sein, ich versuchte zu verstehen, wie zusätzliche Aufgabe von Khan Academy "Query Modernisierer" zu lösen. Wie ich sehe, verstehe ich nicht eindeutig DOM innerHTML-Eigenschaft. Danke für Aufmerksamkeit und Rat! – Dmytro

Antwort

1

Statt zu sagen

if(dollarEls[i] == "Dollar") 

sagen

if(dollarsEls[i].innerHTML == "Dollar"); 

Ersetzen Sie beide solche Vorkommnisse

var dollarEls = document.querySelectorAll("li .dollar"); 
 
    for (var i = 0; i < dollarEls.length; i++) { 
 
     if (dollarEls[i].innerHTML == "Dollar") { 
 
      dollarEls[i].innerHTML = "Dolor"; 
 
     } else if (dollarEls[i].innerHTML == "dollar") { 
 
      dollarEls[i].innerHTML = "dolor"; 
 
     } else { 
 
      dollarEls[i].style.backgroundColor = "orange"; 
 
     } 
 
}
<ul> 
 
    <li>Lorem ipsum <span class="dollar">Dollar</span> sit amet, consectetur adipiscing elit. Pellentesque mi tortor, convallis vitae rhoncus suscipit, finibus a dui. Quisque congue vulputate dolor vel facilisis. Nunc non ipsum porta, efficitur odio euismod, facilisis erat.</li> 
 

 
    <li>Nam <span class="dollar">Dollar</span> ante, faucibus nec enim consequat, auctor faucibus nulla. Etiam bibendum commodo elit at euismod. Nullam elementum varius ligula sit amet accumsan. Nunc arcu nunc, mattis quis mollis eget, ultricies a nisi. Aliquam maximus luctus magna, vitae feugiat <span class="dollar">dollar</span> tempus non. Nulla dui ante, tempus at justo ut, ultricies cursus mauris.</li> 
 
    </ul>

3

Sie testen, ob die String-Darstellung des HTML-Element-Objekt auf den String gleich ist oder nicht, statt dessen Textinhalt des Lesens (mit innerHTML).

Verwandte Themen