質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.60%

javascriptがうまく動かない

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,180

fgfnabwym

score 74

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

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

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

<html>
<link href="shop.css" rel="stylesheet" type="text/css">
<body>

<table border="1"  cellspacing="0" cellpadding="5">
    <tr>
    <th style="padding: 5px; border: 1px solid #333333; width:40px;">日付</th>
    <th style="padding: 5px; border: 1px solid #333333; width:100px;">特売日</th>
    </tr>

<?php
for ($cnt = 0; $cnt < 5; $cnt++) {
print<<<html
<!--1日のデータを表示する-->
<form name="shop" method="post" action="shop.php">
<tr class="noncolor" id="showshop">
<td>{$cnt}</td>
<td>
<select name="sale" onChange="waribiki()">
html;
for ($num = 0; $num < 4; $num++) {
$per[0] = "---";
$per[1] = "2割引き";
$per[2] = "3割引き";
$per[3] = "5割引き";
echo<<<EOT
    <option value="{$per[$num]}" >{$per[$num]}</option>
EOT;
}
print<<<html
</select>
</td>
</tr>
html;
    }
?>

</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="waribiki.js">
</script>

</body>
</html>

shop.cssファイル

.noncolor{
}

.color{
    background-color: #e5ffe5; // 黄緑色
}

waribiki.jsファイル

function waribiki(){
    switch (document.shop.sale.selectedIndex) { // もし項目の特売日で5割引きが選択された時
        case 0: break;
        case 1: document.getElementById('showshop').className = 'color';
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sekitaka_1214

    2015/12/16 07:44

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

    キャンセル

回答 3

checkベストアンサー

0

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

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

<tr class="noncolor">

とします。

次に、

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

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

とします。

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

function waribiki(elem){
  switch (elem.value) {
    case "5割引き":
      elem.parentNode.parentNode.className = 'color';
      break;
    default:
      elem.parentNode.parentNode.className = 'noncolor';
      break;
  }
}

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

jsfiddle

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/27 20:16

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

    分からないままとまっていたので、聞いてよかったです。

    ありがとうございました。

    キャンセル

0

こんにちは。

生成されたhtmlのコードをいただくことはできますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/27 20:09

    sekitaka_1214さん
    すみません。遅れました。
    生成されたhtmlのコードというのは、ブラウザからファイルを実行し、ページのソースを表示した状態の事ですか。

    キャンセル

0

パッと見で分かる、問題だと思う点を挙げます。

  1. DOCUTYPE宣言の場所がおかしい <html>タグの開始タグが2つある
  2. id="showshop"となる<tr>タグが複数生成されてしまっている。idは一意になるようにしなければなりません。

以上、パッと見、おかしいなと思った点です。参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/27 20:11

    ShunsukeIzuiさん
    回答ありがとうございました。
    助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る