问题

我正在构建一个模拟篮球统计数据表,我希望用户能够设置最小游戏播放要求.这是我到目前为止从我在这里发现的各种模糊的类似问题一起拼凑起来的:

 <form> 
<p>Minimum Games Played?</p> 
<input type="number" name="gamesnumber"><br> 
</form>

function view(){
 var x = document.getElementsByClassName("games")
 for(var i = 0; i < x.length; i++){
  if(x[i].value < gamesnumber){
   x[i].closest(".item-row").style.visibility = "visible";
  }else{
   x[i].closest(".item-row").style.visibility = "collapse";
  }
 }
}
</script>

<html>
<head><title>Per Game Stats</title></head>
<body background="" bgcolor=#FFFFFF text="#000000" link=#000000 vlink=#000000>
<tr><td align="center"><hr></td></tr>
<tr><td align="center" width="100%"><div align="center"><b><u>Player Statistics</u></b></div></td></tr>
<tr><td align="center" width="100%"><div align="center"><center><table border="0">
<thead><tr><th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><b><u>ID</u></b></font></th>
<th width="100" bgcolor=#E85757 align="left"><font size="2" color="#FFFFFF"><u><b>Team</b></u></font></th>
<th width="150" bgcolor=#E85757 align="left"><font size="2" color="#FFFFFF"><u><b>Name</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>Pos</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>G</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>M</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>P</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>R</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>A</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>S</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>B</b></u></font></th>
<th width="30" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>T</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>FG%</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>FT%</b></u></font></th>
<th width="50" bgcolor=#E85757 align="center"><font size="2" color="#FFFFFF"><u><b>3P%</b></u></font></th></thead><tbody>
<tr><td width="30" align="center"><font size="2">503</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster6.htm">Washington Bullets</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player503.htm">Aaron Holiday</a></font></td>
<td width="30" align="center"><font size="2">PG</font></td>
<td class="games" width="30" align="center"><font size="2">40</font></td>
<td width="30" align="center"><font size="2">12.2</font></td>
<td width="30" align="center"><font size="2">4.2</font></td>
<td width="30" align="center"><font size="2">1.3</font></td>
<td width="30" align="center"><font size="2">2.7</font></td>
<td width="30" align="center"><font size="2">0.4</font></td>
<td width="30" align="center"><font size="2">0.1</font></td>
<td width="30" align="center"><font size="2">1.1</font></td>
<td width="50" align="center"><font size="2">.407</font></td>
<td width="50" align="center"><font size="2">.692</font></td>
<td width="50" align="center"><font size="2">.489</font></td>
<tr><td width="30" align="center"><font size="2">461</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster26.htm">Portland Trailblazers</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player461.htm">Ajdin Penava</a></font></td>
<td width="30" align="center"><font size="2">C</font></td>
<td class="games" align="center"><font size="2">82</font></td>
<td width="30" align="center"><font size="2">27.6</font></td>
<td width="30" align="center"><font size="2">6.6</font></td>
<td width="30" align="center"><font size="2">8.0</font></td>
<td width="30" align="center"><font size="2">1.0</font></td>
<td width="30" align="center"><font size="2">0.5</font></td>
<td width="30" align="center"><font size="2">0.8</font></td>
<td width="30" align="center"><font size="2">0.8</font></td>
<td width="50" align="center"><font size="2">.414</font></td>
<td width="50" align="center"><font size="2">.841</font></td>
<td width="50" align="center"><font size="2">.391</font></td>
<tr><td width="30" align="center"><font size="2">203</font></td>
<td width="150" align="left"><font size="2"><a href="./rosters/roster23.htm">Golden State Warriors</a></font></td>
<td width="150" align="left"><font size="2"><a href="./players/player203.htm">Alex Abdul-Wahad</a></font></td>
<td width="30" align="center"><font size="2">SG</font></td>
<td class="games" width="30" align="center"><font size="2">0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="30" align="center"><font size="2">0.0</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
<td width="50" align="center"><font size="2">.000</font></td>
</tbody></table></center></div></td></tr>
</body>
</html>
 

但以表单形式输入值什么都没有.我是否在正确的轨道上?还有其他什么完全吗?

提前致谢! :)

  最佳答案

首先,您的表单和脚本标记必须在体内标记。 带有类游戏的元素是 td 标签,所以这个标签没有值属性,而是有 innerText 属性, 接下来,你不会在任何地方调用视图函数。 将代码更改为此(我只编写必须更改的代码):

 <form> 
<p>Minimum Games Played?</p> 
<input type="number" name="gamesnumber" id="gamesnumber"><br> 
</form>
 

这个javascript

 <script type="text/javascript">
function view(){
var gamesnumber = document.getElementById("gamesnumber").value || 0; //this is valid because is a textinput, we add 0 as default value
 var x = document.getElementsByClassName("games");
 for(var i = 0; i < x.length; i++){
  if(x[i].innerText < gamesnumber){
   x[i].closest(".item-row").style.visibility = "visible";
  }else{
   x[i].closest(".item-row").style.visibility = "collapse";
  }
 }
}
window.addEventListener("load", function(){
    //we add this event listener because your input element tecnically doesn't exist until page is loaded
    var input_games = document.getElementById("gamesnumber");
    input_games.addEventListener("input", view); //we call this function every time input value changes

});
</script>
 

  相同标签的其他问题

htmlhtml-table