HTML/JS Select onchange isn't working for some select items
Question
I am new to HTML and JS and a bit stumped at the moment trying to get a select tag to fire off onchange. From reading through SO questions, I know of two ways to do it. One being the onchange="script" field in the select tag. The other is via referencing the element ID in window.onload and calling selectItem.onchange .
Strangely neither is working for me on the 'firstSelect' select element in the following code even though they do work for the select tags above it. In fact I can't seem to reference any element ID below the tr that contains the 'hitter' select element; even if I copy the hitter row and simply change the id and name, it doesn't work. The ejs does seem to work just fine for all the selects.
For the firstSelect element, I have tried the window.onload (script in the head) and using onchange="firstSelected" in the select tag. Neither seem to have any effect.
I am sure that I've done some silly beginner thing or overlooked something, but would appreciate any help.
(For brevity in the post, I removed a bunch of link .css and script bootstrap tags, that I can add back if it's relevant.)
------ 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>
Edit: fixed typo pointed out.
1 answers
solution1
1 ACCPTED 2020-04-01 05:03:23
Are Blort and Changed variables, or did you intend to assign a string to innerHTML? In reference to:
document.getElementById('hitSpd').innerHTML = Blort;
...
document.getElementById('firstSpd').innerHTML = Changed;
Try changing it to:
document.getElementById('hitSpd').innerHTML = 'Blort';
...
document.getElementById('firstSpd').innerHTML = 'Changed';
Otherwise you will be causing an Uncaught ReferenceError
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML SELECT JS onchange() disable comment box
“OnChange” functionality for <html:select> field is not working
HTML onchange attribute not working for select element
html javascript select onchange property is not working
onchange isn't working
Php select onchange doesn't seem to be working
Why isn't my JS function working when I call it through "onchange" in an html form?
onchange select option not working
Javascript onchange select not working
Select2 onchange not working
Related Tags