0

Javascript を使用して、2 つの画像間でオンとオフを切り替えたいと考えています。これまでのところ、カウンターを使用してから、画像がクリックされたときにカウンターが偶数または奇数である場合に基づいて、innerHTML を変更しています。

最初に画像をクリックしたときに、既にそこにある画像を置き換えることで機能しますが、最初に画像を追加した後は代わりに画像を追加し続けます。クリックしたときに画像を追加するのではなく、2回目以降に画像を変更するにはどうすればよいですか?

<!DOCTYPE html>
<html>
  <head>
    <script>
      var x = 0;
      function myFunction() {
        x++;
        var div1 = document.getElementById('div1');
        if (x % 2 != 0) {
          var y = document.write('<img src="http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng" alt="sometext" onclick=myFunction()>');
          div1.appendChild.innerHtml = y;
        } else if (x % 2 == 0) {
          var y = document.write('<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg"       alt="some_text" onclick=myFunction()>')
          div1.appendChild.innerHTML = y;
        }
      }
    </script>
  </head> 
  <body>
    <div id="div1" style="font-size:12px" onclick=myFunction()> <span onclick=myFunction()>
     <img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
     </span> 
    </div>
  </body>
</html>
4

1 に答える 1

2

トグル効果のみを実現しようとしている場合は、次のようなものが機能するはずです。

<!DOCTYPE html>
 <html>
 <head>

<script>
var x=0;
function myFunction(){
    var div1=document.getElementById('div1');
    if(x==0){
        x=1;
        document.getElementById("myimgid").src = "http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng";
    }
    else{
        x=0;
        document.getElementById("myimgid").src = "http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg";
    }
}

</script>
 </head>
 <body>


 <div id="div1" style="font-size:12px" onclick=myFunction()>
 <span>
 <img id="myimgid" src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
 </span>
 </div>

 </body>
 </html>
于 2013-04-21T22:41:21.990 に答える