javascript - HTML/JS Select onchange 不适用于某些选择项
问题描述
我是 HTML 和 JS 的新手,目前试图让选择标签触发 onchange 有点难过。通过阅读 SO 问题,我知道有两种方法可以做到这一点。一个是onchange="script"
选择标签中的字段。另一种是通过引用元素 IDwindow.onload
并调用selectItem.onchange
.
奇怪的是,'firstSelect'
即使它们确实适用于其上方的选择标签,但在以下代码中的 select 元素上都不适用于我。事实上,我似乎无法引用下面tr
包含'hitter'
选择元素的任何元素 ID;即使我复制 hitter 行并简单地更改 id 和 name,它也不起作用。ejs 似乎确实适用于所有选择。
对于 firstSelect 元素,我尝试了window.onload
(头部脚本)并 onchange="firstSelected"
在 select 标记中使用。两者似乎都没有任何效果。
我确信我做了一些愚蠢的初学者事情或忽略了一些事情,但会感谢任何帮助。
(为简洁起见,我删除了一堆链接 .css 和脚本引导标签,如果相关,我可以添加回来。)
------ index.ejs ------
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>Blort!</title>
<script type="text/javascript">
window.onload = function(){
var firstSel = document.getElementById("firstSelect");
firstSel.onchange = function() {
onFirstSelected(firstSel.value);
document.getElementById('hitSpd').innerHTML = Blort;
}
};
</script>
</head>
<body>
<h2>Incredibly Stylish Result Calculator</h2>
<form>
<div id="defense">
<h3>Defense</h3>
<table>
<thead>
<th>Player</th>
<th>Hand</th>
<th>MOV</th>
<th>COM</th>
<th>VEL</th>
<th>AWR</th>
</thead>
<tbody>
<tr>
<td>
<label for="pitcher">Pitcher: </label>
<select id="pitcher" name="pitcher" onchange="onPitcherSelected(this.value)">
<% var selected;
var nameTeamPos;
print.forEach(function (player) {
if (typeof pitcherObj != 'undefined'){
selected = player.id == pitcherObj.id ? "selected" : "";
} else {
selected = "";
}
nameTeamPos = player.PlayerStatsName + " - " + player.Team + " - " + player.PPos + ((player.SPos.length == 0) ? "" : ("|" + player.SPos))%>
<option value="<%= player.id%>" <%= selected%>><%= nameTeamPos%></option>
<% }) %>
</select>
</td>
<td id="pitHand"><%=pitcherObj.Hand%> </td>
<td id="pitMov"><%=pitcherObj.Movement%> </td>
<td id="pitCom"><%=pitcherObj.Command%> </td>
<td id="pitVel"><%=pitcherObj.Velocity%> </td>
<td id="pitAwr"><%=pitcherObj.Awareness%> </td>
</tr>
<tr>
<td>
<label for="catcher">Catcher: </label>
<select id="catcher" name="catcher" onchange="onCatcherSelected(this.value)">
<% var selected;
var nameTeamPos;
print.forEach(function (player) {
if (typeof catcherObj != 'undefined'){
selected = player.id == catcherObj.id ? "selected" : "";
} else {
selected = "";
}
nameTeamPos = player.PlayerStatsName + " - " + player.Team + " - " + player.PPos + ((player.SPos.length == 0) ? "" : ("|" + player.SPos))%>
<option value="<%= player.id%>" <%= selected%>><%= nameTeamPos%></option>
<% }) %>
</select>
</td>
<td id="catHand"><%=catcherObj.Hand%> </td>
<td> </td>
<td> </td>
<td>EYE: </td>
<td id="catEye"><%=catcherObj.Eye%> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>DEF: </td>
<td id="defAvg"><%= Math.floor((parseInt(pitcherObj.Awareness) + parseInt(catcherObj.Eye)) / 2);%> </td>
</tr>
</tbody>
</table>
</div>
<div id="offense">
<h3>Offense</h3>
<table>
<thead>
<th>Player</th>
<th>Hand</th>
<th>CNT</th>
<th>EYE</th>
<th>POW</th>
<th>SPD</th>
</thead>
<tbody>
<tr>
<td>
<label for="hitter">Hitter: </label>
<select id="hitter" name="hitter" onchange="onHitterSelected(this.value)">
<% var selected;
var nameTeamPos;
print.forEach(function (player) {
if (typeof hitterObj != 'undefined'){
selected = player.id == hitterObj.id ? "selected" : "";
} else {
selected = "";
}
nameTeamPos = player.PlayerStatsName + " - " + player.Team + " - " + player.PPos + ((player.SPos.length == 0) ? "" : ("|" + player.SPos))%>
<option value="<%= player.id%>" <%= selected%>><%= nameTeamPos%></option>
<% }) %>
</select>
</td>
<td id="hitHand"><%=hitterObj.Hand%> </td>
<td id="hitCnt"><%=hitterObj.Contact%> </td>
<td id="hitEye"><%=hitterObj.Eye%> </td>
<td id="hitPow"><%=hitterObj.Power%> </td>
<td id="hitSpd"><%=hitterObj.Speed%> </td>
</tr>
<!-- No HTML Elements below here seem to work properly. -->
<tr>
<td>
<label for="firstSelect">First: </label>
<select id="firstSelect" name="firstSelect" >
<% var selected;
var nameTeamPos;
runnersList.forEach(function (player) {
if (typeof firstObj != 'undefined'){
selected = player.id == firstObj.id ? "selected" : "";
} else {
selected = "";
}
if (player.id == 0){
nameTeamPos = player.PlayerStatsName;
} else {
nameTeamPos = player.PlayerStatsName + " - " + player.Team + " - " + player.PPos + ((player.SPos.length == 0) ? "" : ("|" + player.SPos))
}
%>
<option value="<%= player.id%>" <%= selected%>><%= nameTeamPos%></option>
<% }) %>
</select>
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td id="firstSpd"><%=firstObj.Speed%> </td>
</tr>
</tbody>
</table>
</div>
<button>Go!</button>
</form>
<script type="text/javascript">
var list = <%- JSON.stringify(print) %>;
var runnersList = <%- JSON.stringify(runnersList) %>;
var pitcher;
var catcher;
var hitter;
var first;
// var second;
// var third;
function onPitcherSelected(id) {
setPlayers();
setPitcherAttributes(pitcher);
setDefensiveValue();
}
function setPitcherAttributes(player){
document.getElementById('pitHand').innerHTML = player.Hand;
document.getElementById('pitMov').innerHTML = player.Movement;
document.getElementById('pitCom').innerHTML = player.Command;
document.getElementById('pitVel').innerHTML = player.Velocity;
document.getElementById('pitAwr').innerHTML = player.Awareness;
}
function onCatcherSelected(id) {
setPlayers();
document.getElementById('catHand').innerHTML = catcher.Hand;
document.getElementById('catEye').innerHTML = catcher.Eye;
setDefensiveValue();
}
function onHitterSelected(id) {
setPlayers();
setHitterAttributes(hitter);
}
function setHitterAttributes(player){
document.getElementById('hitHand').innerHTML = player.Hand;
document.getElementById('hitCnt').innerHTML = player.Contact;
document.getElementById('hitEye').innerHTML = player.Eye;
document.getElementById('hitPow').innerHTML = player.Power;
document.getElementById('hitSpd').innerHTML = player.Speed;
// document.getElementById('hitAwr').innerHTML = player.Speed;
}
function onFirstSelected(id) {
// setPlayers();
document.getElementById('firstSpd').innerHTML = Changed;
// setTotalSpeedValue();
}
function setPlayers(){
pitcherId = document.getElementById('pitcher').value;
catcherId = document.getElementById('catcher').value;
hitterId = document.getElementById('hitter').value;
// firstId = document.getElementById('first').value;
// secondId = document.getElementById('second').value;
// thirdId = document.getElementById('third').value;
for (var i = 0; i < list.length; i++){
if (list[i].id == pitcherId){
pitcher = list[i];
}
if (list[i].id == catcherId){
catcher = list[i];
}
if (list[i].id == hitterId){
hitter = list[i];
}
}
// for (var i = 0; i < runnersList.length; i++){
// if (runnersList[i].id == firstId){
// first = runnersList[i];
// }
// if (runnersList[i].id == secondId){
// second = runnersList[i];
// }
// if (runnersList[i].id == thirdId){
// third = runnersList[i];
// }
// }
}
function setDefensiveValue(){
var value = Math.floor((pitcher.Awareness + catcher.Eye)/2);
document.getElementById('defAvg').innerHTML = value;
}
</script>
</body>
</html>
编辑:修正错字指出。
解决方案
是Blort
和Changed
变量,还是您打算将字符串分配给innerHTML?在参照:
document.getElementById('hitSpd').innerHTML = Blort;
...
document.getElementById('firstSpd').innerHTML = Changed;
尝试将其更改为:
document.getElementById('hitSpd').innerHTML = 'Blort';
...
document.getElementById('firstSpd').innerHTML = 'Changed';
否则你会导致Uncaught ReferenceError
推荐阅读
- linux - 在 Linux 上创建基于超过一年的日期的十万个文件的 ZIP
- android - 谷歌play因为验证无法发布app但没有问题?
- linux - 代码是什么意思:如果 [$? -eq 0] 是什么意思?
- go - 为什么 mklink /j 在手动输入时有效,但在使用 exec.Command 运行时无效?
- r - R:如何正确抵消 ggplot2 中每日数据的年季标签?
- spring-boot - 我的 Spring-Boot 应用程序不会停止在 IntelliJ 中运行
- excel - 嵌入式 OLEO 对象在编辑时会覆盖自身
- html - 无法按预期实施 Bootstrap 4 设计
- php - 如何连接sybase和laravel 8.0?
- oracle - Oracle 数据库容量规划