HTML語法錯誤，innerHTML的工作不

這裏是我的代碼：HTML語法錯誤，innerHTML的工作不

<html> 
    <style type="text/css"> 
     select {font-family: helvetica; font-size:24; text-align:center; width: 400px;} 
     #message {font-family:helvetica; font-size:24; text-align:center;} 
    </style> 
    <table> 
     <tr> 
      <td> 
       <select name="course" class="ddList"> 
        <option value=""> (please select a course) </option> 
        <option value="physics">Physics</option> 
        <option value="calc">Calculus</option> 
        <option value="stats">Statistics</option> 
        <option value="engl">English</option> 
        <option value="hist">US History</option> 
        <option value="compsci">Computer Science</option> 
       </select> 
      </td>  
      <td> 
       <button onClick="showCourse()">Describe me!</button> 
      </td> 
     </tr> 
    </table> 
    <div id="message">Please select a course.</div> 

    <script> 
     function showCourse(){ 
      var op = document.getElementById("course").value; 
      var desc = ""; 
      if(op == "physics") 
       desc = "Description of AP physics goes here..."; 
      else if(op == "calc") 
       desc = "Description of AP calculus goes here..."; 
      else if(op == "stats") 
       desc = "Description of AP statistics goes here..."; 
      else if(op == "engl") 
       desc = "Description of AP english goes here..."; 
      else if(op == "hist") 
       desc = "Description of AP US history goes here..."; 
      else if(op == "compsci") 
       desc = "Description of AP computer science goes here..."; 
      else 
       desc = "Please select a course to see the description." 
      document.getElementById("message").innerHTML = desc; 
     } 
    </script> 
</html>

基本上我想在div「消息」通過在下拉菜單中選擇的選項進行修改。然而它不起作用，我不知道爲什麼。我已經多次查看代碼。我認爲另一雙眼睛會有所幫助。

來源

2013-04-21 user2303425

你嘗試從與ID course元素的值，但沒有這樣的元素。

我認爲它是一個你要使用的select：

<select name="course" id="course" class="ddList">

來源

2013-04-21 01:16:06 Guffa

我認爲使用jQuery點擊事件更好。使用點擊事件有助於將您的設計與JavaScript分離，這總是一件好事。

這裏有一個工作的jsfiddle：http://jsfiddle.net/paxm8/

HTML：

<select id='course' name="course" class="ddList"> 
      <option value=""> (please select a course) </option> 
      <option value="physics">Physics</option> 
      <option value="calc">Calculus</option> 
      <option value="stats">Statistics</option> 
     </select> 
     <button id='showcourse' >Describe me!</button> 

     <div id="message">Please select a course.</div>

JS：

$(document).on("click","#showcourse",function(){ 
var op = document.getElementById('course').value 
     if(op == "physics") 
     desc = "Description of AP physics goes here..."; 
    else if(op == "calc") 
     desc = "Description of AP calculus goes here..."; 
    else if(op == "stats") 
     desc = "Description of AP statistics goes here..."; 
    else if(op == "engl") 
     desc = "Description of AP english goes here..."; 
    else if(op == "hist") 
     desc = "Description of AP US history goes here..."; 
    else if(op == "compsci") 
     desc = "Description of AP computer science goes here..."; 
    else 
     desc = "Please select a course to see the description." 
    document.getElementById("message").innerHTML = desc; 
});

來源

2013-04-21 01:14:45 stephenthedev

首先，你應該將標籤script頂部，你調用函數showCourse()前：

<html> 
<style type="text/css"> 
    select {font-family: helvetica; font-size:24; text-align:center; width: 400px;} 
    #message {font-family:helvetica; font-size:24; text-align:center;} 
</style> 

<script> 
    function showCourse(){ 
     var op = document.getElementById("course").value; 
     var desc = ""; 
     if(op == "physics") 
      desc = "Description of AP physics goes here..."; 
     else if(op == "calc") 
      desc = "Description of AP calculus goes here..."; 
     else if(op == "stats") 
      desc = "Description of AP statistics goes here..."; 
     else if(op == "engl") 
      desc = "Description of AP english goes here..."; 
     else if(op == "hist") 
      desc = "Description of AP US history goes here..."; 
     else if(op == "compsci") 
      desc = "Description of AP computer science goes here..."; 
     else 
      desc = "Please select a course to see the description." 
     document.getElementById("message").innerHTML = desc; 
    } 
</script> 
<table> 
    <tr> 
     <td> 
      <select name="course" class="ddList"> 
       <option value=""> (please select a course) </option> 
       <option value="physics">Physics</option> 
       <option value="calc">Calculus</option> 
       <option value="stats">Statistics</option> 
       <option value="engl">English</option> 
       <option value="hist">US History</option> 
       <option value="compsci">Computer Science</option> 
      </select> 
     </td> 
     <td> 
      <button onClick="showCourse()">Describe me!</button> 
     </td> 
    </tr> 
</table> 
<div id="message">Please select a course.</div> 
</html>

其次，你忘了指定select標記中的id屬性：

<select name="course" id="course" class="ddList">

來源

2013-04-21 01:32:19 ole

HTML語法錯誤，innerHTML的工作不

回答

相關問題