Question

我在SCSU的第二学期，目前正在攻读计算机科学的入门课程。我们正在讨论HTML和Javascript的基础知识。

我工作的最新实验室是使用按钮将悲伤的脸变成幸福的脸。但是，我想知道是否有可能检查你是否已经点击了按钮，如果是这样，使用If语句它会弹出一个警告说“你让我微笑！”

<html>
<head>
<title>Are you sad?</title>
</head>

<body>

<div style="text-align:center">
<img id="sadFace" src="http://balance3e.com/Images/sad.gif">
<p>

<input type="button" value="Smile"
    onclick="document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
    alert('You made me smile!');">
</p>
</div>

</body>
</html>

目前，当我点击按钮时，程序将显示警告（这是额外的功劳）。但是，我想检查按钮是否已被按下，如果是，它将显示警告。

Answer 1

我会这样做：

<html>
<head>
    <title>Are you sad?</title>

    <script>

        function changeFace() {

            if(document.getElementById('sadFace').src == 'http://balance3e.com/Images/happy.gif') {
                alert('You made me smile!');
            }

            document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif';

        }

    </script>

</head>
<body>

    <div style="text-align:center">
    <img id="sadFace" src="http://balance3e.com/Images/sad.gif">
    <p>
        <input type="button" value="Smile" onclick="changeFace()">
    </p>
    </div>

</body>
</html>

Answer 2

您需要创建一个变量来跟踪此按钮是否被按下。也许将此变量称为“isPressed”并将其默认值设置为false。单击该按钮时，如果变量的值为false，则将其设置为true。否则，请提醒您的消息。

Answer 3

<html>
<head>
<title>Are you sad?</title>
</head>
<script>var i =0;</script>
<body>

<div style="text-align:center">
<img id="sadFace" src="http://balance3e.com/Images/sad.gif">
<p>

<input type="button" value="Smile"
    onclick="
    if(i == 0 ){
i=1;
document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
alert('You made me smile!');
}">
</p>
</div>

</body>
</html>

Answer 4

尝试

onClick = "if(document.getElementById('sadFace').src ==                 
            'http://balance3e.com/Images/happy.gif')
           {
              alert('You made me smile!');
           }"

Answer 5

这是我的方式：

onclick= "if( i== 0)
         {
           document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
           i++;
          }
          else
          {
             alert('You made me smile!');
          }"

当然，您必须首先定义变量i并将其值设置为零。

Javascript - 使用If Statement检查按钮单击

5 个答案: