DIV SPAN SWITCHING

Question

divを切り替える際に問題があります。

<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;"> 
    <p style="margin:0; color:red;"> 
     This div displayed when the web page first loaded. 
    </p> 
</div> 
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;"> 
    <p style="margin:0; color:blue;"> 
     This div displayed when the link was clicked. 
    </p> 
</div> 


<label class="switch"> 
    <input type="checkbox" checked> 
    <span class="slider round" href="javascript:SwapDivsWithClick('swapper-first','swapper-other')"></span> 
</label> 

Answer 1

は、以下のようにコードを変更し

：

<label class="switch"> 
    <input type="checkbox" checked> 
    <a class="slider round" onclick="SwapDivsWithClick()"></a> 
</label> 
<script type="text/javascript"> 
    function SwapDivsWithClick(){ 
     var first = document.getElementById("swapper-first"); 
     var second = document.getElementById("swapper-other"); 
     first.style.display = 'none'; 
     second.style.display = 'block'; 

    } 
</script>