使用对象的属性添加事件侦听器

时间:2014-08-21 05:49:03

标签: javascript html

我想要的是我的代码的工作按钮和输入表单,它是对象文字中的一个块。我运行代码时表单显示正常,但不输出值。为什么不呢?

<input class="number" type="number" placeholder="Enter some number...">
<button>enter</button>
<p id="output"></p>

<script>
var input = document.querySelector("#number");
var output = document.querySelector("#output");

var button = document.querySelector("button");
add.button.addEventListener("click", add.number, false);
button.style.cursor = "pointer";

var add = {
    number: function () {
        amount = parseInt(input.value);
        if (amount == 5) {
            output.innerHTML = alert("true");
        } else {
            output.innerHTML = alert("false");
        }
    }
};
</script>

1 个答案:

答案 0 :(得分:1)

您必须先定义函数,然后才能将其传递给addEventListener,否则您只是传递undefined。

<input class="number" type="number" placeholder="Enter some number..." id="number">
<button id="button">enter</button>
<p id="output"></p>

var input = document.getElementById("number");
var output = document.getElementById("output");

var add = {
    number: function () {
        amount = parseInt(input.value, 10);
        if (amount === "5") {
            alert("true");
            output.innerHTML = true;
        } else {
            alert("false");
            output.innerHTML = false;
        }
    }
};

var button = document.getElementById("button");
button.addEventListener("click", add.number, false);
button.style.cursor = "pointer";

请参阅:http://jsfiddle.net/zw7e7q72/