I use a input
with type range
and try to refresh the innerHTML of an output field with id output
with the selected value, each time when the value changes.
I solved it like this:
function regler() { document.getElementById("output").innerHTML = document.getElementById("regler").value; }
<input id="regler" value="0" type="range" onchange="regler()"> <p id="output"></p>
This works. But if i try it with Jquery then nothing happens:
$("#regler").on ( "change", function(event) { document.getElementById("output").innerHTML = document.getElementById("regler").value; } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="regler" value="0" type="range"> <p id="output"></p>
What am i doing wrong?
EDIT : I just noticed that the code runs well on SO but not on my local webserver?
EDIT2 : Why is my range field looking like this (Tested with Chrome and Firefox):
Instead like this:
I figured out the problem. The problem is that i include jquery.mobile-1.4.5.min.js
after my normal jquery-2.2.3.min.js
script.
After i changed the order, it works. Sorry for not mentioning that i include jquery.mobile
, i did not knew that this file has something to do with the problem.
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.