JSFiddle 和本地 JS 文件的区别？
[英]Difference between JSFiddle and local JS files?
问题描述
I get different outputs from running in JSFiddle vs. in my local environment.
我在 JSFiddle 和我的本地环境中运行得到不同的输出。 I only have 2 files: index.html and slider.js我只有 2 个文件：index.html 和 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.但是，当我使用 Firefox 和 Chrome 打开 html 文件时，我看到“演示”值不可见。 The width is the window width, and the height is 0. Why does this happen?宽度为窗口宽度，高度为0，为什么会出现这种情况？
1 个解决方案
解决方案1
1 已采纳 2020-09-05 02:03:36
Thank you commenters!谢谢评论者！ This is what the index.html file should've looked like: 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>
<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.原来JSFiddle为我们嵌入了javascript文件，但是我们在开发的时候必须自己做。
Result:结果：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.