javascriptがうまく動かない

項目に日付と特売日の二つがあり、特売日のプルダウンメニューで５割引きが選択された時、５割引きが選択された日付と特売日の項目に色付けをしたいのですがうまくいきません。

どこをどう直せばいいのか教えてください。
waribiki.jsのファイルで、条件分岐にswitchを使っていますが、他にいい方法があればそれも教えていただきたいです。

すみません。お願い致します。

html
1<html>
2<link href="shop.css" rel="stylesheet" type="text/css">
3<body>
4
5<table border="1"  cellspacing="0" cellpadding="5">
6    <tr>
7    <th style="padding: 5px; border: 1px solid #333333; width:40px;">日付</th>
8    <th style="padding: 5px; border: 1px solid #333333; width:100px;">特売日</th>
9    </tr>
10
11<?php
12for ($cnt = 0; $cnt < 5; $cnt++) {
13print<<<html
14<!--1日のデータを表示する-->
15<form name="shop" method="post" action="shop.php">
16<tr class="noncolor" id="showshop">
17<td>{$cnt}</td>
18<td>
19<select name="sale" onChange="waribiki()">
20html;
21for ($num = 0; $num < 4; $num++) {
22$per[0] = "---";
23$per[1] = "2割引き";
24$per[2] = "3割引き";
25$per[3] = "5割引き";
26echo<<<EOT
27    <option value="{$per[$num]}" >{$per[$num]}</option>
28EOT;
29}
30print<<<html
31</select>
32</td>
33</tr>
34html;
35    }
36?>
37
38</table>
39<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
40 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
41<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
42<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
43<meta http-equiv="Content-Script-Type" content="text/javascript">
44
45<script type="text/javascript" src="waribiki.js">
46</script>
47
48</body>
49</html>
50

shop.cssファイル

css
1.noncolor{
2}
3
4.color{
5    background-color: #e5ffe5; // 黄緑色
6}

waribiki.jsファイル

javascript
1function waribiki(){
2    switch (document.shop.sale.selectedIndex) { // もし項目の特売日で５割引きが選択された時
3        case 0: break;
4        case 1: document.getElementById('showshop').className = 'color';
5    }
6}

sekitaka_1214

2015/12/15 22:44

生成されたhtmlのコードをいただけますか？

行動規範の内容に同意します

回答3件

ベストアンサー

html
1<tr class="noncolor" id="showshop">

このままだとidが同じ要素が複数現れてしまうので、

html
1<tr class="noncolor">

とします。

次に、

html
1<select name="sale" onChange="waribiki()">

を

html
1<select name="sale" onChange="waribiki(this)">

とします。

最後に、waribikiファンクションを以下のように書き換えます。

javascript
1function waribiki(elem){
2  switch (elem.value) {
3    case "5割引き":
4      elem.parentNode.parentNode.className = 'color';
5      break;
6    default:
7      elem.parentNode.parentNode.className = 'noncolor';
8      break;
9  }
10}

以上で、どうでしょうか？
動くものを置いておきます。
(PHP部分は含まれていませんが)

投稿2015/12/16 01:13

総合スコア2019

2015/12/27 11:16

algさん回答ありがとうございました。 parentNode(親ノードを取得する) elem.parentNode.parentNode.className = 'color'; で親の親ノードを取得するというやり方を初めて知りました。ノードというのも分かりませんでした。分からないままとまっていたので、聞いてよかったです。ありがとうございました。

行動規範の内容に同意します