- ベストアンサー
Javascriptテキストの値で表示文字を変更
Javascript初心者です。テキストに入力された数字（１～７）をもとに、そのテキストボックスの横に文字を表示させたいです。（１なら「非常にあてはまる」、２なら「ややあてはまる」・・・等） 且つ、1つのHTML内にそのテキストボックスが50個あります。。 それぞれ個別に文字を表示させたいのですが、簡易に記述する方法はありますでしょうか。 同様の質問を拝見しましたが、テキストの値で且つ複数が同一ページで挙動できる方法を見つけることができませんでした。お分かりになる方ご教示いただけますと大変助かります。 よろしくお願いいたします。
- kujitan
- お礼率84% (158/187)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
addEventListener ('DOMMouseScroll', function (event) { var e = event.target, no; if ('SELECT' === e.nodeName) if ('select-one' === e.type) if (-1 < (no = e.selectedIndex - (0 < event.detail ? 1: -1))) if (no < e.options.length) e.selectedIndex = no; }, false); ふぁいあ～ふぉっくすなら
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
たとえば、いかのようにすると、すうちがにゅうりょくされるまで、どんなほそくがつくかわからない。 １から７までのほそくを、りすとひょうじしておくべきだと、かんがえるようになるよ。 <!DOCTYPE html> <title></title> <body> <form action="#"> <ol> <li> <p> 原発がきになりますか？ <input type="number" size="5" min="1" max="7" value="" title="1-7までの数値を入力してください" onfocusout="hosoku.call (this, event, 'q1span', 'mess1')" onblur="hosoku.call (this, event, 'q1span', 'mess1')"> <span id="q1span"> </span> </p> </li> <li> <p> 放射能と放射線を説明できますか？ <input type="number" size="5" min="1" max="7" value="" title="1-7までの数値を入力してください" onfocusout="hosoku.call (this, event, 'q2span', 'mess2')" onblur="hosoku.call (this, event, 'q2span', 'mess2')"> <span id="q2span"> </span> </p> </li> </ol> </form> <script> var TYPE = { mess1 : [ 'かなり気になる', 'それとなく気になる', 'やや気になる', 'あまり気にならない', '全く気にならない', 'もうあきらめた', '海外に移住する' ], mess2 : [ 'できる', 'なんとなくできる', '知ったかぶりでなら、押し通せる', '忙しいという理由で断る', 'そんなのも知らないの？という', 'なんで俺に聞くんだよと逆切れする', '無口になる' ] } function hosoku (event, id, type) { var e = this; var doc = e.ownerDocument; var te = doc.getElementById (id); var min = Number (e.getAttribute ('min')); var max = Number (e.getAttribute ('max')); var val; var mes; if ('' === e.value) return; val = isNaN (e.value) ? 0: Number (e.value); if (val < min || max <val) { // e.setAtribute('aria-invalid', 'true'); alert (e.title); setTimeout (function () { e.focus (); e.select (); }, 250); return; } else { /* e.removeAtribute('aria-invalid'); */; } if (mes = TYPE[type]) { te.innerHTML = mes[val]; } } </script>
お礼
早速のご回答をありがとうございます。 通常はマトリクス形式やプルダウン形式で選んでもらうのですが、５０個もありまして選ぶより入力する方が負担が軽いかな、という考えのもと作成しようと思いたったのですが、確かにご指摘の通り、リスト表示は必須ですね。ご教示、ご指摘、大変ありがとうございました。助かりました。
- babu_baboo
- ベストアンサー率51% (268/525)
HTMLだけでかいけつできそうなのだけど、あえてすくりぷとでやるの？！ <select name="hoge"> <option value="" selected>- <option value="1">１．非常にあてはまる <option value="2">２．やや当てはまる </select>
お礼
ご回答ありがとうございました。大変助かりました。