JavaScript 要素の表示、非表示を切り替える

閑話。
GeoJOSN関連の機能を色々と詰め込もうとして時間がかかってしまっているので、関連するJavascriptも機能をまとめていきます。

入力ボックスを必要に応じて表示、非表示を切り替える方法をまとめてみました。

<p>
  <div id="question">What do you do for living?</div>
  <label><input type="radio" name="q1" value="0" onclick="click_val1();" >tube8</label>
  <label><input type="radio" name="q1" value="1" onclick="click_val1();" >Share Videos</label>
  <label><input type="radio" name="q1" value="2" onclick="click_val3();">Others</label>
  <span id="input_box">: <input type="text" name="otherjob" value="" size="15"></span>
</p>

これをブラウザで表示させると、以下の様な画面が表示されます。
f:id:zakiyamatakashi:20180120215624p:plain
このままでは入力ボックスが表示されてしまいます。"tube8"もしくは"Share Videos"を選択する人には不要な入力ボックスです。
そこで、要素"input_box"にstyle="display: none;"を追加します。

<p>
  <span id="input_box" style="display: none;">: <input type="text" name="otherjob" value="" size="15"></span>
</p>

これで、初期表示時に入力ボックスが表示されなくなりました。
f:id:zakiyamatakashi:20180120220703p:plain

そして、以下のスクリプトを追加します。

<script>
  function click_val1() {
     document.getElementById('input_box').style.display = 'none';
  }
  function click_val3() {
     document.getElementById('input_box').style.display = 'inline';
  }
</script>

これで、"Others"をクリックすると入力ボックスが表示され、他の項目がクリックされると入力ボックスが非表示になります。
f:id:zakiyamatakashi:20180120221234p:plain
"document.getElementById('input_box').style.display"に'block'を指定すると入力ボックスをブロック要素として表示し、 'inline'を指定すると入力ボックスをインライン要素として表示します。

visibilityを使って表示、非表示を切り替えることが可能です。'visible'，'hidden'を指定し、それぞれ表示、非表示を切り替えます。
displayとの違いは、非表示にした時に現れます。 visibilityは、その名前の通り、見えるか見えないかであり、'hidden'で消した時も、その空間がそのまま残ります。下の行との間に隙間が出来た様に表示されます。

Why it doesn't work?

作業のメモ、記録をブログに残しています。

JavaScript 要素の表示、非表示を切り替える