ここから本文です

JavaScript を使ってユーザーが選んだ選択肢だけを残し、それ以外の項目を隠す(画...

blo********さん

2013/3/806:30:24

JavaScript を使ってユーザーが選んだ選択肢だけを残し、それ以外の項目を隠す(画面上から消す)方法を考えています。
下のコードを書いてみたのですが、動きません。

初心者です。わかりやすく教えてくれる方がいらっしゃれば助かります。


リストされている4つの"Product" を2種類のクラスを使って、Product for type 1とProduct for type 2の二つのカテゴリーに分けました。
Productのタイプをユーザーが選ぶとそのタイプ(Product for type 1かProduct for type 2)に属する商品だけが
画面上に残るようにしたいです。

以前にも同じようなものを作ったのですが、前回はHTML内のタグに直接イベントハンドラをつけていました。
今回は外部ジャバスクリプトを呼び出してその中のwindow.onload後の関数内から対象のHTML要素(ID)を指定してイベントハンドラ(onchange)を付けたいです。
タグ指定の仕方や変数、プロパティ、引数の渡し方、考え方等間違っているところがあったら指摘してくださると助かります。
ちなみに、なんとなくですが、thisの使い方を間違えているような気がします。
以下が二つのコードです。
よろしくお願いします。

=========================外部JavaScript======================

<script type="text/javascript">
window.onload = function()
{
var selection = document.getElementById("selectionForTheExternalJavascript");
selection.onchange = function(this)
{
var changedValue = this.value;
var ulTag = getElementsByTagName('ul');
for(var i=0;i<ulTag.length;i++)
{
ulTag[i].style.display = "none";
if(ulTag[i].className == changedValue)
{
ulTag[i].style.display="block";
}
else
{
ulTag[i].style.display="none";
}
}
}
</script>

==================外部JavaScript=======================

=============== HTML=================

<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form>
<select id="selectionForTheExternalJavascript">
<option>Type 1</option>
<option>Type 2</option>

</select>
</form>

<ul class="type 1"><li>Product of type 1</li></ul>
<ul class="type 2"><li>Product of type 2</li></ul>
<ul class="type 1"><li>Product of type 1</li></ul>
<ul class="type 2"><li>Product of type 2</li></ul>

</body>
</html>
=============== HTML================

閲覧数:
287
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii********さん

2013/3/807:15:40

> <script type="text/javascript">
> </script>

外部スクリプトファイルにHTMLのタグを書き込んではいけません。

> selection.onchange = function(this)

selection.onchange = function()

> var ulTag = getElementsByTagName('ul');

var ulTag = document.getElementsByTagName('li');

liに変更する理由は後述します。

> }
> }
> }

閉じる } が1つ足りないので、スクリプトの末に } を1つ追加

> <option>Type 1</option>
> <option>Type 2</option>

<option value="type1">Type 1</option>
<option value="type2">Type 2</option>

value属性が無いと後で選択肢のvalueを参照することができません。

> <ul class="type 1"><li>Product of type 1</li></ul>
> <ul class="type 2"><li>Product of type 2</li></ul>
> <ul class="type 1"><li>Product of type 1</li></ul>
> <ul class="type 2"><li>Product of type 2</li></ul>

<ul>
<li class="type1">Product of type 1</li>
<li class="type2">Product of type 2</li>
<li class="type1">Product of type 1</li>
<li class="type2">Product of type 2</li>
</ul>

項目が1つしか無いリストを並べるというのはHTMLの構造として変だと思います。1つのリストに統合して、各項目にclassを付けるのが良いでしょう。

また、classについては半角スペースを空けるとそれぞれ別なclassと解釈されますので、スペースは空けないほうが良いでしょう。

質問した人からのコメント

2013/3/8 18:07:10

降参 sii_sideさん

今回もありがとうございました。しっかり動きました。
毎度初歩的な失敗なのにわざわざ時間を割いていただいて本当に感謝してます。
丁寧な説明でとてもわかりやすかったです。
また是非よろしくお願いします。
ちなみに<ul>タグ単位でクラスをつけているのは、ひとつの製品情報をひとつのulタグ内にまとめて、その中で製品の写真や名前、説明などをそれぞれ別の<li>タグ内に入れることを想定していたためです。

「ジャバ 使ってみた」の検索結果

検索結果をもっと見る

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

別のキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる