2016-07-21 32 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

不要到從啓動。你選擇的是「OL」而不是「LI」。嘗試獲取'OL'的所有孩子並對其進行迭代。 –

+0

同意,但textContent應給出給定元素ri8中的所有文本內容? –

回答

2

p標籤不能含有醇的孩子,所以你需要改變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> 

試試這個,它對我有用!

+1

thnx彼得。有用...:) –

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

迭代,並挑選元素

使用的文檔

+0

嘿,但我只想從亞洲,而不是從歐洲 –

0

使用<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>

相關問題