3

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();"/>

I'm trying to know when the button is clicked, and have that if button is clicked in the if statement. I want to know this so I can change the value that is inside the text box. The problem is, I do not know how to tell when the button is clicked. If you could help me out that would be great.

4

3 に答える 3

7

このonclick属性は、ユーザーがこの特定の要素をクリックしたときに何が起こるべきかを識別します。あなたの場合、関数を実行するように求めています。関数が実行されると、ボタンがクリックされたことを確認できます。これは、関数自体が実行された方法です (別の方法で呼び出した場合を除きます)。

コードは少しわかりにくいですが、2 つのボタンがあり、どちらがクリックされたかを知り、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その要素からプロパティを取得してvalue、stateTextBox.

調整後の HTML は次のとおりです。

<input type="button" value="Play with Pogo" id="play" />
<input type="text" id="state" />
<input type="button" value="Ignore with Pogo" id="ignore" />​
于 2012-11-18T02:02:30.897 に答える
0

フラグ (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";
            }
        }
    }
于 2015-09-12T00:36:26.380 に答える
0

これを何年も後に振り返ってみると、次のように簡単に実行できます。

<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");'/>
于 2016-08-16T19:26:26.543 に答える