CODEWITHSUNDEEP
javascriptif-statementboolean
jessie
jessie

Reputation: 87

Why does this if true condition in js doesn't work

I'm trying to display play or pause button when a user clicks on it. I know I can actually compare those links but I think using a variable would be easier to see? Thanks.

`

<!DOCTYPE html>
<html>
<head>
    <title>ch6</title>
</head>
<body>
    <h1>List</h1>
    <h2>audio note</h2>
    <p>Enter note name</p>
    <input type="text" >
<br>
    <img id="pic" onclick="click()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
    function click(){
        var butt = true;        
        if(butt === true)
        {
            document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
            butt = false;

        }
        else
        {
            document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
            butt = true;
        }
    }

</script>

</body>
</html>

`

I hope to click to change the image.

The image doesn't change when I click it.

Upvotes: 0

Views: 345

Answers (4)

Kshitiz singhal
Kshitiz singhal

Reputation: 14

Declare the variable outside the click function::

var butt = true;
function click(){
}

now work same in that function

Upvotes: 0

moon
moon

Reputation: 670

Try use this code: 

    <img id="pic" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
    <script type="text/javascript">
    var butt = true;
    var img = document.getElementById('pic');
    img.addEventListener('click', click);

    function click(e){    
        if(butt === true)
        {
            e.target.src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
            butt = false;

        }
        else
        {
            e.target.src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
            butt = true;
        }
    }

Upvotes: 0

Vipin Kumar
Vipin Kumar

Reputation: 6546

Seems like HTML/JS doesn't allow a function named click to be set to onclick. Please change

function click(){

to

function clickk(){

and 

<img id="pic" onclick="click()"

to 

<img id="pic" onclick="clickk()"

Also, move your var butt = true; outside the function.

Full example below:

<!DOCTYPE html>
<html>

<head>
  <title>ch6</title>
</head>

<body>
  <h1>List</h1>
  <h2>audio note</h2>
  <p>Enter note name</p>
  <input type="text">
  <br>
  <img id="pic" onclick="clickk()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
  <script type="text/javascript">
    var butt = true;

    function clickk() {

      if (butt === true) {
        document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
        butt = false;

      } else {
        document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
        butt = true;
      }
    }
  </script>

</body>

</html>

Upvotes: 3

klugjo
klugjo

Reputation: 20885

You need to take the variable initialization outside of the function itself

<script type="text/javascript">
    var butt = true;  
    function click(){      
        if(butt === true)
        {
            document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
            butt = false;

        }
        else
        {
            document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
            butt = true;
        }
    }

</script>

Upvotes: 0

Related Questions