2016-07-21 7 views
-1

私はJavaScriptの初心者です。私はアルファベット「b」で始まるアジアのすべての国を手に入れようとしています。以下は私のHTML文書です。次の文書では、警告ボックスに文字「b」で始まるアジアのすべての国が表示されます。getElementsByClassNameが機能していません

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Get Element By class name</title> 
    </head> 

    <body> 
     <p id="countriesInAsia"> 
      <h1>Countries in Asia</h1> 

      <ol class = "a"> 
       <li>India</li> 
       <li>Indonesia</li> 
       <li>Iran</li> 
       <li>Iraq</li> 
       <li>Israel</li> 
      </ol> 

      <ol class = "b"> 
       <li>Bahrain</li> 
       <li>Bangladesh</li> 
       <li>Bhutan</li> 
       <li>Brunei</li> 
      </ol> 

     </p> 

     <p id="countriesInEurope"> 
      <h1>Countries in Europe</h1> 

      <ol class = "a"> 
       <li>Albania</li> 
       <li>Andorra</li> 
       <li>Armenia</li> 
       <li>Austria</li> 
       <li>Azerbaijan</li> 
      </ol> 

      <ol class = "b"> 
       <li>Belarus</li> 
       <li>Belgium</li> 
       <li>Bosnia and Herzegovina</li> 
       <li>Bulgaria</li> 
      </ol> 
     </p> 


     <script> 
      var countriesInAsia = document.getElementById("countriesInAsia"); 
      var countries = countriesInAsia.getElementsByClassName("b"); 
      var message = "Countries in Asia starts with alphabet b are : "; 

      for(var i = 0; i < countries.length; i++){ 
       message = message + countries[i].textContent; 
      } 

      alert(message); 
     </script> 
    </body> 
</html> 
+0

から開始するしないでください。あなたは 'LI'ではなく' OL'を選択しています。 「OL」のすべての子をフェッチして、それを繰り返してください。 –

+0

合意しましたが、textContentは指定された要素ri8のすべてのテキストコンテンツを与える必要がありますか? –

答えて

2

pタグを使用すると、div要素にPを変更する必要があるので、オールを含めることはできません選ぶ:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Get Element By class name</title> 
    </head> 

    <body> 
     <div id="countriesInAsia"> 
      <h1>Countries in Asia</h1> 

      <ol class = "a"> 
       <li>India</li> 
       <li>Indonesia</li> 
       <li>Iran</li> 
       <li>Iraq</li> 
       <li>Israel</li> 
      </ol> 

      <ol class = "b"> 
       <li>Bahrain</li> 
       <li>Bangladesh</li> 
       <li>Bhutan</li> 
       <li>Brunei</li> 
      </ol> 

     </div> 

     <div id="countriesInEurope"> 
      <h1>Countries in Europe</h1> 

      <ol class = "a"> 
       <li>Albania</li> 
       <li>Andorra</li> 
       <li>Armenia</li> 
       <li>Austria</li> 
       <li>Azerbaijan</li> 
      </ol> 

      <ol class = "b"> 
       <li>Belarus</li> 
       <li>Belgium</li> 
       <li>Bosnia and Herzegovina</li> 
       <li>Bulgaria</li> 
      </ol> 
     </div> 


     <script> 
      var countriesInAsia = document.getElementById("countriesInAsia"); 
      var countries = countriesInAsia.getElementsByClassName("b"); 
      var message = "Countries in Asia starts with alphabet b are : "; 

      for(var i = 0; i < countries.length; i++){ 
       message = message + countries[i].textContent; 
      } 

      alert(message); 
     </script> 
    </body> 
</html> 

これを試して、それは私のために働いた! <div>代わり<p>

最終的なコードの

+1

Thnx Peter。できます...:) –

0
//var countriesInAsia = document.getElementById("countriesInAsia"); 
var countries = document.getElementsByClassName("a"); 

反復処理し、要素の子どもたちが

使用文書

+0

ねえ、ヨーロッパからではなく、アジアからしか来ないよ。 –

0

使用:

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <title>Get Element By class name</title> 
 
    </head> 
 

 
    <body> 
 
     <div id="countriesInAsia"> 
 
      <h1>Countries in Asia</h1> 
 

 
      <ol class = "a"> 
 
       <li>India</li> 
 
       <li>Indonesia</li> 
 
       <li>Iran</li> 
 
       <li>Iraq</li> 
 
       <li>Israel</li> 
 
      </ol> 
 

 
      <ol class = "b"> 
 
       <li>Bahrain</li> 
 
       <li>Bangladesh</li> 
 
       <li>Bhutan</li> 
 
       <li>Brunei</li> 
 
      </ol> 
 
     </div> 
 

 
     <div id="countriesInEurope"> 
 
      <h1>Countries in Europe</h1> 
 

 
      <ol class = "a"> 
 
       <li>Albania</li> 
 
       <li>Andorra</li> 
 
       <li>Armenia</li> 
 
       <li>Austria</li> 
 
       <li>Azerbaijan</li> 
 
      </ol> 
 

 
      <ol class = "b"> 
 
       <li>Belarus</li> 
 
       <li>Belgium</li> 
 
       <li>Bosnia and Herzegovina</li> 
 
       <li>Bulgaria</li> 
 
      </ol> 
 

 
     </div> 
 
     <script> 
 
      var countriesInAsia = document.getElementById("countriesInAsia"); 
 
      var countries = countriesInAsia.getElementsByClassName("b"); 
 
      var message = "Countries in Asia starts with alphabet b are : "; 
 

 
      for(var i = 0; i < countries.length; i++){ 
 
       message = message + countries[i].textContent; 
 
      } 
 

 
      alert(message); 
 
     </script> 
 
    </body> 
 
</html>

関連する問題