如何判断按钮是否被点击

Question

I have this code:

<script type="text/javascript">
function changestate()
{
    var StateTextBox = document.getElementById("State");
    var IgnoreTextBox = document.getElementById("Ignore");
    var PlayButton = document.getElementById("Play");
    if(document.getElementById("Play").onclick == true)
    {
        StateTextBox.value = "Happy";   
    }
}
</script>
<input TYPE="button" VALUE="Play with Pogo" id="Play" onClick="changestate();"/>

我想知道当按钮被点击时，如何在if语句中判断是否已经点击了该按钮。我想知道这个问题是为了更改文本框内的值。问题是，我不知道如何判断按钮何时被点击。如果您能帮我解决这个问题那就太好了。

- heinst

---

如果调用了该函数，则表示按钮已被点击。但是请注意，通常表单中的按钮输入将提交表单，这会终止任何JS代码。 - Marc B

你在尝试做什么？看起来你正在检查 ignoreTextBox 是否被点击（在你的 if 条件和 else 条件中都是如此），而不是一个按钮。 - Sampson

你说得对...让我快速修复它。 - heinst

Answer 1

onclick属性标识用户单击该特定元素时应发生什么。在您的情况下，您要求运行一个函数；当函数运行时，您可以放心按钮已被单击 - 毕竟这就是函数本身被启动的方式（除非您以其他方式调用它）。

您的代码有点令人困惑，但假设您有两个按钮，并且您想知道哪一个被单击了，通过stateTextBox值告知用户：

(function () {
    // Enables stricter rules for JavaScript
    "use strict";
    // Reference two buttons, and a textbox
    var playButton = document.getElementById("play"),
        stateTextBox = document.getElementById("state"),
        ignoreButton = document.getElementById("ignore");
    // Function that changes the value of our stateTextBox
    function changeState(event) {
        stateTextBox.value = event.target.id + " was clicked";
    }
    // Event handlers for when we click on a button
    playButton.addEventListener("click", changeState, false);
    ignoreButton.addEventListener("click", changeState, false);
}());

您可以在http://jsfiddle.net/Y53LA/上实时测试此代码。

请注意，我们在playButton和ignoreButton上添加了事件监听器。这使我们可以保持 HTML 的整洁（无需 onclick 属性）。每当用户单击它们时，两者都会触发 changeState 函数。

在 changeState 函数内部，我们可以访问一个 event 对象。这为我们提供了有关发生的特定事件（在本例中是 click 事件）的一些细节。对象的一部分是 target，它是被点击的元素。我们可以从该元素中获取 id 属性，并将其放入 stateTextBox 的 value 中。

这是调整后的 HTML：

<input type="button" value="Play with Pogo" id="play" />
<input type="text" id="state" />
<input type="button" value="Ignore with Pogo" id="ignore" />​

- Sampson

Answer 2

回顾这个情况，多年后，你可以简单地做到：

<script type="text/javascript">
function changestate(action)
{
    var StateTextBox = document.getElementById("State");
    var IgnoreTextBox = document.getElementById("Ignore");
    var PlayButton = document.getElementById("Play");
    if(action == "Play")
    {
        StateTextBox.value = "Happy";   
    }
}
</script>
<input TYPE="button" VALUE="Play with Pogo" id="Play" onClick='changestate("Play");'/>

- heinst

Answer 3

你可以通过使用一个标志（true或false）来知道按钮是否被点击。

        var flag = false;

    window.addEventListener("load", changestate, false);

    function changestate() {

        var StateTextBox = document.getElementById("State");
        var PlayButton = document.getElementById("Play");

        PlayButton.addEventListener("click", function () {
            flag = true;
        })

        PlayButton.addEventListener("click", change)

        function change() {
            if (flag) {
                StateTextBox.value = "Happy";
            }
        }
    }

- Dionis Olen