CODEWITHSUNDEEP
javascript
Dmytro
Dmytro

Reputation: 45

querySelectorAll and innerHTML logic

I can't build logic of JavaScript in this case. Why "Dollar" don't changes to "Dolor", and "dollar" to "dolor"? But at the same time background styling matches. What's wrong with my logic? Thank you.

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>

Upvotes: 0

Views: 367

Answers (2)

Richard Hamilton
Richard Hamilton

Reputation: 26444

Instead of saying

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

say

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

Replace both such occurences

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>

Upvotes: 1

Quentin
Quentin

Reputation: 944530

You're testing if the string representation of the HTML Element Object is equal to the string or not, instead of reading its text content (with innerHTML).

Upvotes: 3

Related Questions