2017-08-08 3 views
0

私はjavaScriptが初めてです。クラス名が割り当てられているJavaScriptを使用してリスト項目のテキストを変更したいのですが、どうすればよいか分かりません。リスト項目を変更するクラス名がhtmlでjavaスクリプトを使用して割り当てられました

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <script> 
      function change_txt(){ 
       document.getElementsByClassName('Items').innerText="salam"; 
      } 
     </script> 
     <title></title> 
    </head> 
    <body> 
     <div id="container"> 
      <ul id="My_List"> 
       <li class="Items">f</li> 
       <li class="Items">f</li> 
       <li class="Items">e</li> 
       <li class="Items">fw</li> 
       <li class="Items">re</li> 
      </ul> 
     </div><button onclick="change_txt()">Change text</button> 
    </body> 
    </html> 
+0

すべての項目を一度に変更したいのですか、特定の項目を変更したいのですか? –

+0

私はすべての項目のテキストを変更したい –

答えて

0

あなたのコードは非常に近いですが、そのためのヒントは、すぐにこの問題を見つけるためにあなたを有効にしているでしょう。

JavaScriptを使用すると、Chrome、Firefox、Web Inspector/Developmentツール(この場合は具体的にはconsoleタブ)を使用して、問題を発見したかのようにコード呼び出しをテストします。

デバッグの場合と同様に、配列を返し、その配列内のHTMLElementsではなく、その配列にプロパティを設定するだけで済みます。

E.Gこのページで開発ツールを使用した場合、これを行うことができます。あなたは手掛かりが複数の要素、それは通常、このことから、それは非常に来るのでArray

を使用します。この場合、複数の項目を返すために何のために名前get elements by class nameである知っているだけので

> document.getElementsByClassName('post-tag'); 
(14) [a.post-tag.js-gps-track, a.post-tag.js-gps-track, a.post-tag.js-gps-track, a.post-tag, a.post-tag, a.post-tag, span.post-tag.highlight, span.post-tag, span.post-tag.highlight, span.post-tag, span.post-tag, span.post-tag, span.post-tag.highlight, span.post-tag] 

基本的なループを使用します。あなたの機能は次のようになります

function change_txt(){ 
    var itemsA = document.getElementsByClassName('Items'); 
    for(var key in itemsA){ 
     itemsA[key].innerText="salam" 
    } 
} 
+1

ありがとうトーン親愛なるマーティン –

1

これは正常に動作します:

function change_txt(){ 
    var items = document.getElementsByClassName('Items'); 
    for (var i=0;i<items.length;i++) { 
     items[i].innerText="salam"; 
    } 
} 
+0

あなたは約1分で私にそれを打つ私はもっと完全な答えを追加していた:P –

+0

それは私にもたくさん起こる、それはCrazyyyyだ:3、私はちょうどそれを投稿した少しの何かを追加しました –

関連する問題