Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

ボタンで文章を隠したり表示したり。

javascript

ボタンで文章を隠したり表示したりするコードを書いてみました。
……車輪の再発明にすらなっていないという。
折角なので、ボタンの文章も変えてみました。

<html>
  <head>
    <title>サンプル</title>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>

    <form>
      <input type="button" value="Show" onClick="showAndHide()" id="info_button">
    </form> 
    <div id="info"></div>
  </body>
</html>

function showAndHide()
{
    var node = document.getElementById("info");
    var button_status = document.getElementById("info_button");

    if (button_status.value == "Show") {
        node.innerHTML = "<p>文章を表示しました。<b>タグも反映できます。</b>";
        button_status.value = "Hide";
    } else {
        node.innerHTML = "";
        button_status.value = "Show";
    }
}