表示を切り替える方法：onclickを1回だけ使用する入力フィールドのブロックはありませんか？

Question

onclick（ "Click here"）の後に、この入力（実際にはdivを含むdiv）の表示プロパティを変更したいと思います。この部分はうまくいく...しかし、もう一度クリックした後、もう一度隠されるようにする（ディスプレイ= "ブロック"の代わりに "なし"など）、ここで私は困難がある。 classList.toggleを試しましたが、クラスを変更したくないので、ただ1つのプロパティを変更したいと思います。 Javascriptを使用して入力フィールドを作成する可能性もあることを知っていますが、私は同じ点で再びデッドロックになると思います。

<form role="form"> 
     <p id="mag">Click here!</p> 

    <div id="switch" class="xxx"style="display:none;" > 
    <input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" > 

    </div> 
    </form> 



document.getElementById("mag").addEventListener("click", function toffi(){ 

    document.getElementById("switch").style.display="block"; 

     console.log(document.getElementById("switch").style.display); 


}); 

http://codepen.io/zeeebra/pen/RgRYxK

Answer 1

これを試してみてください：

document.getElementById("mag").addEventListener("click", function toffi(){ 
    var sw = document.getElementById("switch"); 
    if (sw.style.display === "block") { 
    sw.style.display = "none"; 
    } else { 
    sw.style.display = "block"; 
    } 
    console.log(sw.style.display); 
});