javascript - 是否可以让一个 onclick 在 javascript 中一个接一个地运行不同的功能？

Question

我必须制作其中一款上课时不要按红色按钮的游戏，基本上我需要在红色按钮的顶部显示文本。
问题是你不能只按一次红色按钮，所以我无法让它正常工作。
我正在考虑制作一个点击计数器并将其用作 if-else 语句的基础。
例如，if(clicks == 0 ) 我希望 IDed ButtonText 段落为“Press me!”在点击次数 = 1 时，我希望文本为“嗨!”在点击次数 = 2 时，我想成为“你好”。有人可以帮帮我吗？
到目前为止，这是我拥有的内容，包括 css 和假设的 if else 语句:

var clicks = 0;
function myFunction() {
    clicks += 1;
    document.getElementById("counter").innerHTML = clicks;
};

/* 	
function Function() {
    if(clicks == 0) {
        document.getElementById("ButtonText").innerHTML = "Press Me!"
    }
    if else(clicks == 1) {
        document.getElementById("ButtonText").innerHTML = "Hi"
    }
    else(clicks == 2) {
        document.getElementById("ButtonText").innerHTML = "Hello."
    }
} 
*/

div {
    font: Arial;
    position: fixed;
    margin: 13% 0 0 38%;
    font-size: 58px;
    color: white;
    width: 380px;
    height: 480px;
    border: 0px black transparent;
    cursor: pointer;
}

p {
    cursor: pointer;
    display: block;
}

#button {
    display: block;
    width: 665px;
    height: 665px;
    background: url(Images/Unpressed.jpg) no-repeat top;
    cursor: pointer;
    margin-left: 30%;
    margin-top: 10%;
}
	
#button:active {
    background: url(Images/Pressed.jpg) no-repeat bottom;
}

<p>Clicks: <p id="counter">0</p></p>
<div id="container" onclick="myFunction()">
    <p id="ButtonText">Press Me!</p>
</div>
<a id="button" onClick="myFunction()"></a>

Answer 1

你很接近。您的 javascript 中存在一些语法错误。 if else() 无效，应该是 else if()。 F12 将在浏览器控制台中向您显示此类错误。还要注意括号和缩进的位置，以帮助提高代码可读性。

除此之外，只需使用一个事件监听器来调用检查点击值的函数。这样的事情会起作用:

var clicks = 0;
function myFunction() {
    clicks += 1;
    document.getElementById("counter").innerHTML = clicks;

};

function foo(){
    myFunction();
    if(clicks == 0){
        document.getElementById("ButtonText").innerHTML = "Press Me!";
    } else if (clicks == 1) {
        document.getElementById("ButtonText").innerHTML = "Hi";
    } else if (clicks == 2) {
        document.getElementById("ButtonText").innerHTML = "Hello.";
    } else {
        //more than 3 clicks
    }

}

//add an event listener to your button
document.getElementById('ButtonText').addEventListener('click',foo);

这是一个 JS Fiddle 示例:https://jsfiddle.net/igor_9000/bbtawaff/

希望对您有所帮助。