ボタンをクリックすると1つのDivを表示して別のDivを非表示

私がしたいことは、ボタンをクリックすると1つのdivが消えて別のものが表示され、同じボタンをもう一度クリックすると、表示され、2番目のものは消えます。これはボタンをクリックするまで続きます。私が試した何ボタンをクリックすると1つのDivを表示して別のDivを非表示

：

はJavaScript：

function change_image(){ 
    var flag = true; 
    if(flag){ 
     document.getElementById('speaker_main_div_with_rounded_image').style.display="none"; 
     document.getElementById('speaker_main_div_with_square_image').style.display="block"; 
     flag = false; 
    } else { 
     document.getElementById('speaker_main_div_with_rounded_image').style.display="block"; 
     document.getElementById('speaker_main_div_with_square_image').style.display="none"; 
     flag = true; 
    } 
}

HTML：すべてのヘルプは感謝される

<input type="button" value="Click Here to get another image" onClick="change_image(this)">

。

ありがとうございます。

出典

2016-07-30 Bhavin Shah

あなたのhtmlはどこにありますか？何が問題なのですか？ – Dekel

最初のボタンをクリックして最初のdivが消え、2番目のdivが表示されたら、 ' –

しかし、もう一度ボタンをクリックすると2回目の表示になり、最初のdivと2番目のdivの表示が消えてしまいます。 –

あなたのflag変数はローカルであり、その値は関数が呼び出されたときに常に同じです。それを初期化する：

var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';

出典

2016-07-30 13:37:59 lbar

完了...ありがとうございます。7分で回答を受け取ります。 –

これは私のjQueryライブラリを使用したソリューションです。

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script> 
 
      $(document).ready(function(){ 
 
       \t $("#btn1").click(function(){ 
 
       \t \t $("#div1").toggle(); 
 
       \t \t $("#div2").toggle(); 
 
       \t }); 
 
      }); 
 
      </script> 
 
      <style> 
 
      .hide{ 
 
      display:none; 
 
      } 
 
      </style> 
 
     </head> 
 
     <body> 
 
      <button type="button" id="btn1">Toggle</button> 
 
      <div id ="div1"> 
 
      I am div 1 
 
      </div> 
 
      <div id ="div2" class="hide"> 
 
      I am div 2 
 
      </div> 
 
     </body> 
 
    </html>

出典

2016-07-30 13:54:07

ボタンをクリックすると1つのDivを表示して別のDivを非表示

答えて

関連する問題