Webアプリケーション、選択したもの以外は非表示にし、選択したものだけを表示したい

Question

ボタンをクリックしたら複数行の要素を非表示にしたいです。
以下のJSでは、1のボタンを押すとsample1とsample2のdivタグの要素を非表示し、
2のボタンを押すとsample2のみを非表示にする。としたのですがエラーが出てしまいました。
解決方法を教えてください。よろしくお願いします。

  <script>
    function disp(obj) {
      if(obj.style.display==='block' || obj.style.display==="") obj.style.display = 'none';
      else obj.style.display = 'block';
    }
    document.write('<form>');
    document.write('<input type="button" value="1" onclick="disp(obj1)">');
    document.write('<input type="button" value="2" onclick="disp(obj2)">');

    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj2"> sample2 </div>');

    document.write('</form>');
  </script>

Display.html:9 Uncaught TypeError: Cannot read property 'display' of undefined
    at disp (Display.html:9)
    at HTMLInputElement.onclick (Display.html:49)

document.write('<div id="obj1"> sample1 </div>');
を一つ消すとエラーはなくなるのですが、複数あると上記のエラーが出てきます。

Comments

[sousuke]

「エラーが出てしまいました」じゃなくて「こういうエラーが出たのでこういう対応をしたのですが」っていうのはないんですか？回答者側がわざわざ再現してエラーメッセージを確認しないといけませんか？回答がつきにくいと思います。

Answer 1

ともかくidの重複は止めましょう…。

Comments

[gmon]

ボタンを押すと複数の記述が非表示になる方法は他にありませんか？

[sousuke]

idは１ページに必ず一つなので複数のdomを操作したい場合は他の方法を取ります。
「複数」の定義次第です。「divを上から数えていくつ」ということなのかclassを追加して指定するのか。
中身がsample1と書いてあるかどうかで判断するのか。それは他ならぬgmon氏が決定しコードを書くべきだと思います。

Answer 2

document.write を使ったコードを書かせる参考書ではなく、もっと新しい参考書を探されることをお勧めします。

    function disp(obj) {
      obj = document.getElementById(obj);
      if(obj.style.display==='block' || obj.style.display==="") obj.style.display = 'none';
      else obj.style.display = 'block';
    }
    document.write('<form>');
    document.write('<input type="button" value="1" onclick="disp(\'obj1\')">');
    document.write('<input type="button" value="2" onclick="disp(\'obj2\')">');

    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj2"> sample2 </div>');

    document.write('</form>');
```**動くサンプル：**[https://jsfiddle.net/pwjp7zn8/](https://jsfiddle.net/pwjp7zn8/)

---

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ウェブ開発者アンテナ [W'ANEB]】
[http://web.antenna.work/innerhtml/](http://web.antenna.work/innerhtml/)

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 01日目） | Ginpen.com】
[http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/](http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/)

Comments

[gmon]

サイトを見回って自分で組み立ててみたんですが、問題がある書き方だったでしょうか。。。

動くサンプルありがとうございます。
動くサンプルでは１のボタンを押すとsample1が一つ消えますがもう一つが消えないのですが、
2つとも消すことはできませんか？

最終的には、JSPで表示されたdivタグ内容を表示、非表示と切り替えたいのですが、他に方法はありますか。指定するdivタグは複数ある場合が知りたいです。

[kei344]

> 問題がある書き方だったでしょうか
はい。過去のコードとして残っている程度で、今ほとんど使われていません。Webの情報を読む前に、一度本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進みます。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

[gmon]

回答ありがとうございました。
改めて勉強しなおそうと思います。

Answer 3

変数obj1 obj2が未定義です。

    function disp(obj) {
      if(obj.style.display==='block' || obj.style.display==="") obj.style.display = 'none';
      else obj.style.display = 'block';
    }
    document.write('<form>');
    document.write('<input type="button" value="1" onclick="disp(obj1)">');
    document.write('<input type="button" value="2" onclick="disp(obj2)">');

    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj1"> sample1 </div>');
    document.write('<div id="obj2"> sample2 </div>');

    document.write('</form>');
    var obj1 = document.getElementById('obj1');
    var obj2 = document.getElementById('obj2');

これでとりあえず動くと思いますが、document.writeとかonclickとかは使わないほうが無難です。

コメントを受けて追記

↓この記事が参考になるかと思います。
JavaScriptで、html上のとあるclassを持つ要素を軒並み非表示にしたいとき - Qiita

Comments

[gmon]

すいません。質問に間違いがあったので修正しました。
1のボタンを押すと2つのsample1が消え、2のボタンを押すと1つのsample2が消えるようにしたいです。

[Lhankor_Mhy]

追記しました。
その記事のコメントにあるように、CSSでスタイルを書いてクラスをトグルしてコントロールした方がいいかと思います。

[gmon]

回答ありがとうございました。
CSSも調べてみます。

Answer 4

classを用いて実現することができました。ありがとうございました。
組み立てたJSを載せておきます。

  <script>
    function del(name){
      var obj = document.getElementsByClassName(name);
      for(var i = 0; i < obj.length; i++) {
        if(obj[i].style.display === "none") obj[i].style.display = "block";
        else obj[i].style.display = "none"
      }
    }
  </script>

  <button onclick="del('apple')">sample1&2 del</button>
  <button onclick="del('app')">sample3 del</button>
  <div id="a" class="apple">sample1</div>
  <div id="b" class="apple" >sample2</div>
  <div class="app">sample3</div>