Javascript在JSFiddle上运行，但不在网页上运行 [英] Javascript Running on JSFiddle but not on a webpage
问题描述
好的，我有一个代码可以根据下拉选择显示不同的表单 b $ b，这是我的网页标记 这是因为在小提琴中你的代码被设置为运行在 将代码包装到 无论如何，就像@positivew记住的，你的代码错过了 Ok so I have a code that would show different forms based on dropdown selection Well its always giving me Test1 which means its not changing the div display, it's working on JSFiddle but not on the webpage..
and here's my webpage markup
That is because in the fiddle your code is set to run at Wrap your code into a Anyway, like @positivew remembered, your code misses the 这篇关于Javascript在JSFiddle上运行，但不在网页上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
这里是。那么它总是给我Test1这意味着它不改变div显示，它在JSFiddle上工作，但不在网页上。$ .b
$ b
< html>
< body>
< style>
.hidden {
display：none;
}
< / style>
< script type ='text / javascript'>
document.getElementById（'options'）。onchange = function（）{
var i = 1;
var myDiv = document.getElementById（i）;
while（myDiv）{
myDiv.style.display ='none';
myDiv = document.getElementById（++ i）;
}
document.getElementById（this.value）.style.display ='block';
};
< / script>
< select name =optionsid =options>
< option value =1>显示< / option>
< option value =2> Wka< / option>
< / select>
< div id =1class =hiddenstyle =display：block> Test 1< / div>
< div id =2class =hidden> Test 2< / div>
< / body>
< / html>
onLoad 中，但是在你的代码中它是在DOM创建之前运行的。
window.onload 这样的事件：
window.onload = function（）
{
document.getElementById（'options'）。onchange = function（）{
var i = 1;
var myDiv = document.getElementById（i）;
while（myDiv）{
myDiv.style.display ='none';
myDiv = document.getElementById（++ i）;
}
document.getElementById（this.value）.style.display ='block';
};
};
< head> 标签。在你的JS脚本里面，它在语义上是正确的。
Here's the fiddle to that.. <html>
<body>
<style>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
</script>
<select name="options" id="options">
<option value="1"> Display </option>
<option value="2">Wka</option>
</select>
<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>
</body>
</html>
onLoad, but in your code its running before the DOM is created.window.onload event like this:window.onload = function()
{
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
};
<head> tag. Is semantically correct to put your JS scripts inside it.
