• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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); ふぁいあ～ふぉっくすなら

kujitan
質問者

お礼

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

その他の回答 (2)

回答No.2

たとえば、いかのようにすると、すうちがにゅうりょくされるまで、どんなほそくがつくかわからない。 １から７までのほそくを、りすとひょうじしておくべきだと、かんがえるようになるよ。 <!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">&nbsp;</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">&nbsp;</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>

kujitan
質問者

お礼

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

回答No.1

HTMLだけでかいけつできそうなのだけど、あえてすくりぷとでやるの？！ <select name="hoge"> <option value="" selected>- <option value="1">１．非常にあてはまる <option value="2">２．やや当てはまる </select>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptでテキストボックスを変更したい

    Javascriptを使って、テキストボックスの選択した文字だけ、 大きくしたり色を変えたりしたいのですが、 どのように記述したらいいのでしょうか？ （テキストボックスにhtmlタグ表示ではなく、ビジュアル的にも変更した情報を表示させたい） 最終的にその情報を保存したいと思っております。

  • テキストボックスの文字の大きさを変更するには

    タグ打ちでWebページを作っています。 テキストボックスに関する質問です。 テキストボックス本体の大きさは下のように記述すれば指定できることはわかっているのですが、 <input type="text" size=xx> テキストボックス内の「文字」の大きさを変更するにはどうすればよいでしょうか。 HTMLタグ、JavaScript、CSSでできる方法を教えてください。

  • javascriptで、表示されている文字を変更する。

    javascriptで、表示されている文字を変更する。 初歩的な質問になると思いますが、ご教授ください。 javascriptで、例えば、 フォーム内の特定のテキストボックスに、ある値を代入する場合は、 frm1.text1.valur="あああ"; // フォームの名前.テキストボックスの名前.value また、特定の文字<font id="moji1">あああ</font>を表示／非表示する場合は、 document.getElementById('moji1').style.visibility='visible'; // 又は、'hidden' と言った感じで、javascriptで、 特定の文字を変更したいのですが、行き詰っております。 例えば、 <font>あああ</font> を <font>いいい</font> に変更。 どなたかご存知の方、ご教授ねがいます。 よろしくお願いします。 　

  • テキストボックスに文字飾り表示（２の３乗）が出来ない。

    テキストボックスに文字飾り表示（２の３乗）が出来ない。 　JavaScriptを使用しテキストボックスに上付き、下付き文字を表示したいのですが上手く表示しません。HTMLのコードが出てしまいます。下記簡単なコードを添付しますので、何方か正しい表示方法を教えてください。 参考までにコード中(1)は正しく表示できず（テキストボックス中）、(2)は正しく表示します。（非テキストボックス） <HTML> <HEAD> <SCRIPT language="JavaScript"> function disp(){ var c=new Array("2"+"3".sup(),"1","2"); document.tm.a1.value=c[0]; // (1) document.write(c[0]); // (2) } </SCRIPT> </HEAD> <body> <FORM name="tm"> <INPUT type="button" value="" onClick="disp()"> <INPUT name="a1" type="text" size="20" width="10"> </FORM> </body> </HTML>

  • テキストボックスの値が変更になったら

    ポイントを入力するテキストボックスが２つあって、 １つめのテキストボックスの値が変更されたら２つめの テキストボックスにもその変更された値を表示するとい う事は可能でしょうか？ onChangeの処理かなーとも思ったのですが書き方がよく わかりません。 何か良い方法がありましたら教えて下さい。

  • 多分簡単なJavaScriptなんだと思います。

    JavaScript初心者です。 チェックボックスが５つ有り、任意のチェックボックスをチェックして実行ボタンを押すと、sentakuという名前のテキストボックスにチェックしたボックスの値が代入されるjavascriptの記述を教えて下さい。 例えば、1番目と3番目と5番目に、チェックを入れて実行すると、テキストボックスsentakuには「1,3,5」と表示されるとベターです。

  • JavaScriptで、テキストボックスを指定する変数を動的に変更した

    JavaScriptで、テキストボックスを指定する変数を動的に変更したいのですが どのように変えればいいのでしょうか。 現在、HTML上で、テキストボックスの名前を'r001'から'r300'まで持っている 表を扱っているのですが、 その'r001'から'r300'までの数字の部分を、 動的にアクセスできるように変更したいのです。 こういった場合、どのようにプログラミングしていいのかを いくらGOOGLEなどで調べても出てこなかったので、どなたか 知っている方がいれば教えてください。

  • テキストボックスの値変更時のイベント

    フォーム上のテキストボックスに、前の画面で入力したデフォルト値が表示されている状態で、テキストボックスの値を変更したらJavaScriptの関数でチェックさせたいと考えているのですがうまくいきません。 onChangeイベントは値を変更（例えば削除するなど）して、Enterキーを押すなりフォーカスを移すなりしないとイベントが発生しないので、変更されたら即座にチェックということができません 何かうまい方法はないでしょうか？

  • JavaScript Eventのタイミング

    Eventの挙動を学ぶために、簡単なスクリプトを作成しました。 テキストボックスに文字列を入れて、Submitボタンを押すと、 テキストボックスの下に(innerHTMLで)入力文字が表示され、 ボタン自体も入力文字になるというものです。 しかし、テキストに文字を入力し、Submitを押してもボタン・innerHTMLともに文字は変化しません。このままリロードをすると変化します。 挙動からして、マウスクリック自体は反応していないが、リロードによりイベントハンドラが動作しているように見受けられます。 イベントハンドラはonclickに代入しているためなぜこのようになるのか わかりません。 できるだけ、JavascriptとHTMLを分離したく外だしのファイルで 実現したいと思っています。 考え方、(比較的平易な)参考資料などありましたら教えていただけないでしょうか？ HTMLで<body onload="init()">として、JavaScriptでは以下のように記述しています。 function init(){ document.getElementById("button").click = change(); } function change(){ keyword = document.getElementById("keyword").value; document.getElementById("input").innerHTML = keyword; document.getElementById("button").value = keyword; }

  • JavaScript　テキストボックス内のコピー

    JavaScriptのテキストボックス内の文字列のコピーを教えてください。 TextboxA、TextboxB、TextboxCがあり、TextboxAのフォーカスがTextboxBに移動した時に、TextboxA内の文字列をTextboxCにコピーする記述がわかりません。 どなたか参考になるサイト、JavaScriptの記述を教えてください。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する