Question

我必须在课堂上制作其中一个不要按红色按钮游戏，基本上我需要在红色按钮上方显示文字。
问题是你不要只按红色按钮一次，这样我就无法使它工作。
我正在考虑制作一个点击计数器并将其用作if-else语句的基础例如，if（clicks == 0）我希望段落IDed ButtonText为＆＃34;按我！＆＃34;在clicks = 1时，我希望文本为＆＃34;嗨！＆＃34;在clicks = 2时，我想成为＆＃34;你好。＆＃34;有人可以帮帮我吗？这是我到目前为止所拥有的内容，包括css和假设的if else声明：

＆＃13;

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."
    }
} 
*/

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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小提琴示例：https://jsfiddle.net/igor_9000/bbtawaff/

希望有所帮助。

Answer 2

＆＃13;

    var clicks = 0;
    var clicks = 0;
  
	function myFunction() {

        clicks += 1;
        var greetings= ["hi","hello","Press Me!"]; 
        document.getElementById("counter").innerHTML = clicks;
        document.getElementById("ButtonText").innerHTML = greetings[clicks % greetings.length];

    };



	
	/*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."}
    } */

＆＃13;

	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;
	}

＆＃13;

	<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>

＆＃13;

    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."}
    } */

＆＃13;

	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;
	}

＆＃13;

	<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>

＆＃13;

Answer 3

尝试以下方法：

<script>
var clicks = 0;
var myFunction = function() {
  if(clicks == 0) return false // not sure if you would want to return false here, it would prevent the increment of clicks     
  if(clicks%2==0){
     document.getElementById("elementToChange").innerHTML = "new value";
   } else {
      alert('hello');
   }
    clicks += 1;
   document.getElementById("counter").innerHTML = clicks;
  };
   </script>


 <div>Clicks: <p id="counter">0</p></div>


 <input type="button" id="container" onClick="myFunction();" value="clickme1"/>

使用modulo（％）运算符将完成您的任务

使用它并使用控制台查看JS每次单击时所执行的操作

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

Answer 4

请参阅此小提琴https://jsfiddle.net/coolbhes/7yhkfqq9/

 var clicks = 0;
    function myFunction() {
         clicks += 1;
        var greetings= ["hi","hello","Press Me!","add As many you like..."]; 
        document.getElementById("counter").innerHTML = clicks;
        document.getElementById("ButtonText").innerHTML = greetings[clicks % greetings.length];

    };

document.getElementById('ButtonText').addEventListener('click',myFunction);

是否有可能让一个onlick在javascript中一个接一个地运行不同的功能？

4 个答案: