Question

我正在尝试编写一个东西，当我填写表格并按下“提交作业”按钮时，它将显示我今天的所有作业。这有效，但是，它只显示第一个表格线。

有什么建议吗？

<!DOCTYPE html>
<center>
<html>
<body>

<table border="1" style="width:100%"><col width="15%"><col width="55%"><col width="30%"><center><tr>
<th>Subject</th>
    <th>Name of Assignment</th>
    <th>Amount of Time</th></tr>

<tr><td>
<center><select id="Subject1">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td>
<td><center><input type="text" id="as1" size="45"></center></td>
<td><center><input type="number" id="time1" min= “5” max= “1000” size="16"></center></td></tr>
</center>
<tr><td>
<center><select id="Subject2">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as2" size="45"></center></td><td><center><input type="number" id="time2" min= “5” max= “1000” size="16"></center></td></tr>
</center>
<tr><td>
<center><select id="Subject3">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as3" size="45"></center></td><td><center><input type="number" id="time4" min= “5” max= “1000” size="16"></center></td></tr>
</center>
<tr><td>
<center><select id="Subject4">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as4" size="45"></center></td><td><center><input type="number" id="time4" min= “5” max= “1000” size="16"></center></td></tr>
</center>
<tr><td>
<center><select id="Subject5">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td>
<td><center><input type="text" id="as5" size="45"></center></td><td><center><input type="number" id="time5" min= “5” max= “1000” size="16"></center></td></tr>
<tr><td>

<center><select id="Subject6">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as6" size="45"></center></td><td><center><input type="number" id="time6" min= “5” max= “1000” size="16"></center></td></tr>

<tr><td>

<center><select id="Subject7">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as7" size="45"></center></td><td><center><input type="number" id="time7" min= “5” max= “1000” size="16"></center></td></tr>
<tr><td>

<center><select id="Subject8">
  <option value="select">Select One</option>
<option value="divider">-----------------------</option>
  <option value="Spanish">Spanish</option>
  <option value="Science">Science</option>
<option value="Math">Math</option>
  <option value="World Cultures">World Cultures</option>
  <option value="ELA">ELA</option>
<option value="Orchestra">Orchestra</option>
<option value="Contest Math">Contest Math</option>
<option value="divider">-----------------------</option>
<option value="Piano">Piano</option>
<option value="Exercise">Exercise</option>
</select></center></td><td><center><input type="text" id="as8" size="45"></center></td><td><center>
<input type="number" id="time8" min= “5” max= “1000” size="16"></center></td></tr>

</center>

</table>
<br>
<button onclick="myFunction()" class='button'>Submit Homework</button>
<style>
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 9.5px 19px;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 18px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }
</style>
<br><br>
<h4 id="aa"></h4>
<h4 id="bb"></h4>
<h4 id="aaa"></h4>
<h4 id="dd"></h4>
<h4 id="ee"></h4>
<h4 id="ff"></h4>
<h4 id="gg"></h4>
<h4 id="hh"></h4>

<style>
h4 {
    font-size: 110%;
}
th {
    font-size: 150%;
}
</style>
<script>
function myFunction() {
    var a = document.getElementById("Subject1").value;
    var b = document.getElementById("as1").value;
    var c = document.getElementById("time1").value;
    document.getElementById("aa").innerHTML = a + ": " + b + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + c + " minutes";

var d = document.getElementById("Subject2").value;
    var e = document.getElementById("as2").value;
    var f = document.getElementById("time2").value;
    document.getElementById("bb").innerHTML = d + ": " + e + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + f + " minutes";

var g = document.getElementById("Subject3").value;
    var h = document.getElementById("as3").value;
    var i = document.getElementById("time3").value;
    document.getElementById("aaa").innerHTML = g + ": " + h + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + i + " minutes";

var j = document.getElementById("Subject4").value;
    var k = document.getElementById("as4").value;
    var l = document.getElementById("time4").value;
    document.getElementById("dd").innerHTML = j + ": " + k + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + l + " minutes";

var m = document.getElementById("Subject5").value;
    var n = document.getElementById("as5").value;
    var o = document.getElementById("time5").value;
    document.getElementById("ee").innerHTML = m + ": " + n + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + o + " minutes";

var p = document.getElementById("Subject6").value;
    var q = document.getElementById("as6").value;
    var r = document.getElementById("time6").value;
    document.getElementById("ff").innerHTML = p + ": " + q + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + r + " minutes";

var s = document.getElementById("Subject6").value;
    var t = document.getElementById("as6").value;
    var u = document.getElementById("time6").value;
    document.getElementById("gg").innerHTML = s + ": " + t + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + u + " minutes";

var v = document.getElementById("Subject8").value;
    var w = document.getElementById("as8").value;
    var x = document.getElementById("time8").value;
    document.getElementById("hh").innerHTML = v + ": " + w + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + x + " minutes";
}
</script>

</body>
</html>
</center>

Answer 1

您的ID时间4重复，且time3不存在。要查找此类错误，请打开浏览器控制台日志，您将看到错误。

检查元素＆gt;控制台

未捕获的TypeError：无法读取null

的属性“value”

<input type="number" id="time3" min= "5" max= "1000" size="16"/>

形式为今天的家庭作业

1 个答案: