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

  • Button doesn't trigger the corresponding action (both tag button and input type=button)
  • Google maps custom button with standard style
  • Easiest way to make disabled button look disabled with jQuery
  • Load an HTML file via a button using jQuery
  • Redirect users to a page when they click on back button of the browser
  • CSS Button calling a javascript function
  • <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.

  • <button type=“submit”> with onclick submitting twice?
  • How to clear text area with a button in html using javascript?
  • Missing click event for <span> inside <button> element on firefox
  • Click submit button twice for form to post
  • How do I use the Enter key as an event handler (javascript)?
  • How to Avoid, Ajax button click twice
  • 5 Solutions collect form web for “Javascript – Checking button clicks with If Statement”

    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.

    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>
    

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

    Try

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