使脚本工作onload或类似而不是更改

时间:2012-11-23 04:59:36

标签: javascript onchange onload

我有一个简单的js脚本,我一直用它来加载基于从下拉列表中选择的值的文本框。

问题:它只在加载时加载,如果在加载时选择的值不是0,我需要在加载页面时加载。这个脚本对我来说非常混乱,所以我无法弄清楚到底在哪里我需要更新。

剧本:

function addInput(){
var arr = [
"<p style='text-align:center;'>Reward 1: <input type='text' name='rew1' id='rew1' value='<?php echo $connt['reward_1'] ?>'></p>",
"<p style='text-align:center;'>Reward 2: <input type='text' name='rew2' id='rew2' value='<?php echo $connt['reward_2'] ?>'></p>",
"<p style='text-align:center;'>Reward 3: <input type='text' name='rew3' id='rew3' value='<?php echo $connt['reward_3'] ?>'></p>",
"<p style='text-align:center;'>Reward 4: <input type='text' name='rew4' id='rew4' value='<?php echo $connt['reward_4'] ?>'></p>",
"<p style='text-align:center;'>Reward 5: <input type='text' name='rew5' id='rew5' value='<?php echo $connt['reward_5'] ?>'></p>",
"<p style='text-align:center;'>Reward 6: <input type='text' name='rew6' id='rew6' value='<?php echo $connt['reward_6'] ?>'></p>",
"<p style='text-align:center;'>Reward 7: <input type='text' name='rew7' id='rew7' value='<?php echo $connt['reward_7'] ?>'></p>",
"<p style='text-align:center;'>Reward 8: <input type='text' name='rew8' id='rew8' value='<?php echo $connt['reward_8'] ?>'></p>",
"<p style='text-align:center;'>Reward 9: <input type='text' name='rew9' id='rew9' value='<?php echo $connt['reward_9'] ?>'></p>",
"<p style='text-align:center;'>Reward 10: <input type='text' name='rew10' id='rew10' value='<?php echo $connt['reward_10'] ?>'></p>",
];
var el = document.getElementById('select');
var div = document.getElementById('rewards');
div.style.display = "block";
while(div.hasChildNodes()) { div.removeChild(div.childNodes[0]); }

if(el.selectedIndex > 0) {
for(var i = 0; i<el.options[el.selectedIndex].value; i++) {
div.innerHTML = div.innerHTML + arr[i];
}
}

}

3 个答案:

答案 0 :(得分:2)

希望这会有所帮助:

        window.onload = function(){
            addInput();
        }

答案 1 :(得分:1)

标签上的

<body onload="return addInput()">

答案 2 :(得分:0)

获得真实&#34; onload&#34;行为可能非常棘手。问题是虽然在load属性上设置body标签在技术上是有效的,但是一旦主体完成加载它就会触发。窗口加载可能存在类似的问题。

许多更复杂的网页无法完成加载所需的所有支持文件,脚本或基于AJAX的组件,因此从天真的onload事件触发的脚本部分可能会失败。

许多JavaScript框架提供了一种管理这种情况的方法,在所有资源都准备好之前不会触发。我建议使用你最喜欢的框架中实现的那个 - 我绝对建议使用一个框架,因为没有一个好的跨浏览器支持是一个噩梦!

例如,在Dojo(直到最近),你会这样做:

dojo.addOnLoad(/* function */) 

在所有页面资源可用时触发。