2017-12-05 11 views
0

ユーザーがクリックすると再生または一時停止ボタンを表示しようとしています。私は実際にそれらのリンクを比較することができることを知っていますが、私は変数を使用するのが見やすいでしょうか?おかげさまで jsの真の条件が機能しないのはなぜですか?

`

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

`

私は、画像を変更する]をクリックしたいと考えています。

クリックすると画像が変わらない。

+3

ボタンをクリックするたびに()が実行されますが、「var butt = true;」が1回ずつ実行されるためです。そのため、 'else {}'は決して実行されません。 – moon

+0

あなたのコードを大声で読んでください。 "機能のクリックが呼び出されます。突き合わせをtrueに設定します。突き合わせが真の場合..."あなたの問題が表示されますか.... – epascarello

答えて

3

onclickに設定するclickという名前の関数を許可していませんHTML/JSように思える機能の外で変数の初期化を取る必要があります。また、

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

function clickk(){ 

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

function click(){ 

を変更する関数の外であなたの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>

0

あなたは、それ自体が

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

てみ使用このコード:

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

はクリック機能::

var butt = true; 
function click(){ 
} 
外の変数を宣言します

はその関数で同じになります

関連する問題