Javascript的新手,编写基本功能

时间:2012-03-12 02:46:04

标签: javascript html

这是我的javascript代码:

var num1;
function press_Button(){
    num1 = 3;           
}

然后我有一个按钮:onclick="press_Button()"

在HTML中是这样的:

<script type="text/javascript">
    document.write(num1);
</script>

即使按下按钮,页面也会将变量显示为未定义,我无法弄清楚原因。

帮助!

3 个答案:

答案 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);