Question

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

`

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

`

我希望点击更改图片。

单击图像时图像不会改变。

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

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

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

Answer 4

在click函数::

之外声明变量

var butt = true;
function click(){
}

现在在该功能中工作相同

为什么这在js中的真实条件不起作用

4 个答案: