javascript change event works in bootply not in local

Question

I would like to change a picture on the site when a selector/combobox changed. It works perfectly in a Bootply, but it looks like the change event not caught neither in local env, nor in appspot...

Here is the HTML:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/static/js/nbafantasy.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
    Eastern conference
    <div class="form-group">
        <img src="http...">
        <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="11a" name="11a">
            <option>-</option>
            <option>4:0</option>
            <option>4:1</option>
            <option>4:2</option>
            <option>4:3</option>
            <option>3:4</option>
            <option>2:4</option>
            <option>1:4</option>
            <option>0:4</option>
        </select>
        <img src="...">
    </div>
    <div clas

And the JS:

$('#11a').on('change', function (e) {
    console.log('fired');
    if((document.getElementById('11a').value).charAt(0) == "4") {
        document.getElementById("21aimg").src="http....";
    }else{
        document.getElementById("21aimg").src="http.....";
    }
});

Your image element doesn't have an ID. – Titus Apr 14 '17 at 10:55 — Titus, Apr 14 '17 at 10:55

score 0 · Answer 1 · answered Apr 14 '17 at 10:56

You have to wrap your event binding in $(document).ready(fn) block:

$(document).ready(function() { // <---ensures that DOM is ready to use
  $('#11a').on('change', function(e) { // <---now it will be bound on target element
    console.log('fired');
    if (this.value.charAt(0) == "4") {
      document.getElementById("21aimg").src = "http....";
    } else {
      document.getElementById("21aimg").src = "http.....";
    }
  });
});

javascript change event works in bootply not in local

1 Answers1