Javascript - Checking button clicks with If Statement

I am in my second semester at SCSU and currently taking an introductory course into Computer Science. We are going over the basics of HTML and Javascript.

The latest lab I worked on was using a button to change a sad face into a happy face. However, I was wondering if it was possible to check if you have already clicked the button, if so, using an If statement it will pop up an alert saying, "You made me smile!"

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

<body>

<div style="text-align:center">
<img id="sadFace" src=".gif">
<p>

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

</body>
</html>

Presently the program will display the alert when I click the button (this was for extra credit). However, I would like to check if the button has already been pressed, if so it will display the alert.

I am in my second semester at SCSU and currently taking an introductory course into Computer Science. We are going over the basics of HTML and Javascript.

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

<body>

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

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

</body>
</html>

Share Improve this question asked Feb 13, 2014 at 18:47 mccdlibby 1812 gold badges7 silver badges14 bronze badges

3 if(document.getElementById('sadFace').src == 'http://balance3e./Images/happy.gif'){alert('clicked')}. I hope that answer your question – Satpal Commented Feb 13, 2014 at 18:49

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

I would do it like this:

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

    <script>

        function changeFace() {

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

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

        }

    </script>

</head>
<body>

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

</body>
</html>

Here is my way:

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

Of course you will have to define the variable i and set its value to zero at first.

You need to create a variable that will keep track of whether this button was pressed. Maybe call this variable "isPressed" and set its default value to false. When you click the button, if the variable's value is false, set it to true. Otherwise, alert out your message.

<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./Images/sad.gif">
<p>

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

</body>
</html>

Try

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript - Checking button clicks with If Statement - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)