jquery - javascript change event works in bootply not in local -
this question has answer here:
i change picture on site when selector/combobox changed. works in bootply, looks change event not caught neither in local env, nor in appspot...
the html code:
<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 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....."; } });
you have wrap event binding in $(document).ready(fn) block:
$(document).ready(function() { // <---ensures dom ready use $('#11a').on('change', function(e) { // <---now bound on target element console.log('fired'); if (this.value.charat(0) == "4") { document.getelementbyid("21aimg").src = "http...."; } else { document.getelementbyid("21aimg").src = "http....."; } }); });
Comments
Post a Comment