Question

我是初学者，试图从文本框中获取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

Answer 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

Answer 2

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

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（更多浏览器支持）

在Javascript函数中没有获取HTML TextBox值？已经搜索过，但没有找到令人信服的答案

2 个答案: