CODEWITHSUNDEEP
javascripthtml
John Riggs
John Riggs

Reputation: 493

HTML/JS Select onchange isn't working for some select items

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:&nbsp;</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:&nbsp;</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:&nbsp;</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:&nbsp;</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.

Upvotes: 1

Views: 314

Answers (1)

Brendan C.
Brendan C.

Reputation: 171

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

Upvotes: 1

Related Questions