这是我的javascript代码:
var num1;
function press_Button(){
num1 = 3;
}
然后我有一个按钮:onclick="press_Button()"
在HTML中是这样的:
<script type="text/javascript">
document.write(num1);
</script>
即使按下按钮,页面也会将变量显示为未定义,我无法弄清楚原因。
帮助!
答案 0 :(得分:5)
那是因为document.write
方法将值转换为字符串,该字符串被写入页面的源代码中。
编写源代码后,变量与源代码中的文本之间没有任何关联。无论你对变量做什么都不会成为创建源代码时曾经写过的东西。
每当您更新变量时,如果希望更改可见,则还必须更新页面中的内容。您无法在创建源代码后更改源代码,因此您需要一个可以定位的元素,例如围绕该值的范围:
<span id="num1Container"><script>document.write(num1)</script></span>
使用getElementById
方法获取元素:
function press_Button() {
num1 = 3;
document.getElementById('num1Container').innerHTML = num1.toString();
}
答案 1 :(得分:4)
调用press_Button
后,您需要更新num1的显示。我要做的就是放弃document.write,而是制作一个span:
<span id="num1Display"></span>
然后:
function press_Button() {
num1 = 3;
document.getElementById("num1Display").textContent = num1;
}
或者,如果你需要它来处理不喜欢textContent的古老浏览器,你可以这样做:
function press_Button() {
num1 = 3;
document.getElementById("num1Display").innerHTML = num1;
}
答案 2 :(得分:1)
调用document.write时,由于尚未单击按钮,因此未定义num1。在页面加载时调用document.write一次,写入变量的字符串表示,然后返回 - 它的工作完成。当num1的值发生变化时,显示的值不会改变。
要在单击按钮时修改显示的值,press_Button必须修改dom。见上面的答案。
我不建议在元素上使用内联onclick处理程序。请改用:
<button type="button" id="button">Click</button>
然后你的javascript:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('button').addEventListener('click', function() {
// Code here
}, false);
}, false);