代码之家 › 专栏 › 技术社区 › jessie

如果js中的true条件不起作用,为什么会这样

boolean if-statement javascript

jessie · 技术社区 · 8 年前

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

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

我希望单击以更改图像。

当我点击它时,图像不会改变。

4 回复 | 直到 8 年前

Vipin Kumar 8 年前

看起来像 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>

klugjo 8 年前

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

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

moon 8 年前

尝试使用以下代码:

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

Thamaraiselvam 8 年前

在click函数外声明变量:

var butt = true;
function click(){
}

现在,在该函数中使用相同的函数