如果js中的真实条件不起作用，为什么会这样答案

【问题标题】：Why does this if true condition in js doesn't work如果js中的真实条件不起作用，为什么会这样
【发布时间】：2017-12-05 04:12:58
【问题描述】：

当用户点击它时，我试图显示播放或暂停按钮。我知道我实际上可以比较这些链接，但我认为使用变量会更容易看到？谢谢。

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

我希望点击更换图片。

点击后图片没有变化。

【问题讨论】：

因为每次点击按钮都会执行click()，而var butt = true;每次都会执行。这就是为什么else{} 永远不会运行
大声朗读您的代码。 “调用函数点击。将 butt 设置为 true。如果 butt 为 true ......”你看到你的问题了吗......

标签： javascript if-statement boolean

【解决方案1】：

似乎HTML/JS 不允许将名为click 的函数设置为onclick。请更改

function click(){

到

function clickk(){

和

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

到

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

另外，将您的 var butt = true; 移到函数之外。

下面的完整示例：

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

【讨论】：

【解决方案2】：

您需要在函数本身之外进行变量初始化

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

【讨论】：

【解决方案3】：

尝试使用此代码：

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

【讨论】：

【解决方案4】：

在点击函数外声明变量::

var butt = true;
function click(){
}

现在在该函数中工作相同

【讨论】：