0

我是一名初学者，试图从文本框中获取 HTML 以在 if/else 语句中使用。这是我的 HTML 代码：

    <label id="label1">
    Enter any Number:
</label>
<input type="button" id="Button1"  value="button" />
    <input type="text" id="TextBox1" name="myname" />

我的 JavaScript 代码是：

    <script type="text/javascript">
//<![CDATA[
var buttonElement = document.getElementById("Button1");
var txt_value =document.getElementById("TextBox1").value;
buttonElement.addEventListener('click', function() { Clicked(txt_value) }, false);

function Clicked(txt_value) {

    if (txt_value == 7) {
        alert("You are 7");
    }
    else { alert("You are not 7"); }
}
//]]>
    </script>

我观察到

    var txt_value =document.getElementById("TextBox1");

进而

      buttonElement.addEventListener('click', function() { Clicked(txt_value.value) }, false);

上面的例子工作得很好。

有人可以告诉我有什么问题吗：

    var txt_value =document.getElementById("TextBox1").value;

我不知道为什么我得到一个空的 txt_value

4

2 回答 2

1

原因是您在用户输入任何内容txt_value 之前就获得了价值；因此该值始终为空。

如果您将代码更改为：

var txt_value =document.getElementById("TextBox1");//removed .value

并且功能点击到：

function Clicked(txt_value) {

    if (txt_value.value == 7) { //added .value
        alert("You are 7");
    }
    else { alert("You are not 7"); }
}

应该管用。

这是一个jsfiddle

于 2012-07-18T14:46:33.943 回答
1

将值的获取移动到点击处理程序中......

var textbox1 = document.getElementById("TextBox1");

document.getElementById("Button1").onclick = function () {
    var txt_value = textbox1.value;

    if (parseInt(txt_value, 10) === 7) {
        alert("You are 7");
    } else { 
        alert("You are not 7"); 
    }
};

现在，您将获得页面加载时文本框中的值。

这是一个JSFiddle来测试它。

更新通过缓存文本框提高了效率。将 addEventListener 移除到 onclick（更多浏览器支持）

于 2012-07-18T14:46:40.010 回答