Javascriptテキストの値で表示文字を変更

解決済

質問者：kujitan
質問日時：2011/05/31 15:44
回答数：3件

Javascript初心者です。テキストに入力された数字（１～７）をもとに、そのテキストボックスの横に文字を表示させたいです。（１なら「非常にあてはまる」、２なら「ややあてはまる」・・・等）
且つ、1つのHTML内にそのテキストボックスが50個あります。。
それぞれ個別に文字を表示させたいのですが、簡易に記述する方法はありますでしょうか。
同様の質問を拝見しましたが、テキストの値で且つ複数が同一ページで挙動できる方法を見つけることができませんでした。お分かりになる方ご教示いただけますと大変助かります。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： babu_baboo
回答日時：2011/06/01 15:48

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);

ふぁいあ～ふぉっくすなら

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。大変助かりました。

通報する

お礼日時：2011/06/17 17:00

No.2

回答者： babu_baboo
回答日時：2011/06/01 09:21

たとえば、いかのようにすると、すうちがにゅうりょくされるまで、どんなほそくがつくかわからない。

１から７までのほそくを、りすとひょうじしておくべきだと、かんがえるようになるよ。

<!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>

- 0
- 件

通報する

この回答へのお礼

早速のご回答をありがとうございます。
通常はマトリクス形式やプルダウン形式で選んでもらうのですが、５０個もありまして選ぶより入力する方が負担が軽いかな、という考えのもと作成しようと思いたったのですが、確かにご指摘の通り、リスト表示は必須ですね。ご教示、ご指摘、大変ありがとうございました。助かりました。

通報する

お礼日時：2011/06/01 13:12