Javascript - Checking button clicks with If Statement

Question

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

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.

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

woz · Accepted Answer · 2014-02-13 18:53:25Z

2

I would do it like this:

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

answered Feb 13, 2014 at 18:53

woz

11.1k3 gold badges37 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mccdlibby Over a year ago

Thank you for the response. I like all the different ways of solving the same problem.

user2203117 · Accepted Answer · 2014-02-13 19:01:22Z

1

Here is my way:

onclick= "if( i== 0)
         {
           document.getElementById('sadFace').src='http://balance3e.com/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.

answered Feb 13, 2014 at 19:01

user2203117

2 Comments

woz Over a year ago

@mccdlibby I would just note that it's bad practice to put JavaScript right in your HTML, especially when it's this long. I know this is just an exercise, but just so you know...

mccdlibby Over a year ago

Thank you for the advice - I will keep this in mind for future reference!

Animal Rights · Accepted Answer · 2014-02-13 18:52:57Z

1

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.

answered Feb 13, 2014 at 18:52

Animal Rights

9,4277 gold badges32 silver badges41 bronze badges

Comments

Mahmoud.Eskandari · Accepted Answer · 2014-02-13 18:56:07Z

1

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

answered Feb 13, 2014 at 18:56

Mahmoud.Eskandari

1,4783 gold badges22 silver badges37 bronze badges

Comments

woz · Accepted Answer · 2014-02-13 18:57:11Z

1

Try

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

edited Feb 13, 2014 at 18:57

woz

11.1k3 gold badges37 silver badges65 bronze badges

answered Feb 13, 2014 at 18:56

RahulKT

1714 bronze badges

Collectives™ on Stack Overflow

Javascript - Checking button clicks with If Statement

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related