Difference between JSFiddle and local JS files?
Question
I get different outputs from running in JSFiddle vs. in my local environment. I only have 2 files: index.html and slider.js
My local file setup:
asdf$ cat index.html
<html>
<body>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id="demo"></div>
</body>
</html>
asdf$ cat slider.js
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}
When I open the html file with Firefox and Chrome, however, I see the "demo" value is invisible. The width is the window width, and the height is 0. Why does this happen?
1 answers
solution1
1 ACCPTED 2020-09-05 02:03:36
Thank you commenters! This is what the index.html file should've looked like:
<html>
<body>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id="demo"></div>
<script src="slider.js"></script> <!-- important!!! -->
</body>
</html>
It turns out that JSFiddle embeds the javascript files for us, but we have to do this ourselves while developing.
Result:
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.