2017-01-13 3 views
0

この場合、JavaScriptのロジックを構築することはできません。なぜ「ドル」は「ドルー」に変わらず、「ドル」は「ドルー」に変わるのですか?しかし同時に、背景スタイリングがマッチします。私の論理に何が問題なの?ありがとうございました。querySelectorAllとinnerHTMLロジック

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

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>
、ドンを交換して言います'innerHTML'を使用するのではなく、' textContent'を使用します。 – trincot

+2

私は混乱しています。あなたは、あなたが要素の値を設定するために 'innerHTML'を使うことができることは明らかです。なぜ要素の値を参照/検査/取得するためにもそれを使用しませんか?とにかく、なぜあなたはこれを行う必要がありますか? –

+0

正直言って、私はKhan Academy "Query modernizer"からの追加作業の解決方法を理解しようとしていました。私が見ているように、私は明確にDOM innerHTMLプロパティを理解していません。注意とアドバイスありがとう! – Dmytro

答えて

1

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

は両方のように出現箇所明白な誤りは別に

3

HTML要素オブジェクトの文字列表現ではなく、(innerHTML付き)、テキストの内容を読んで、文字列に等しいかそうでない場合は、テストしています。代わりに

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

を言うの