Javascript初心者です。テキストに入力された数字(1~7)をもとに、そのテキストボックスの横に文字を表示させたいです。(1なら「非常にあてはまる」、2なら「ややあてはまる」・・・等)
且つ、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);
ふぁいあ~ふぉっくすなら
No.2
- 回答日時:
たとえば、いかのようにすると、すうちがにゅうりょくされるまで、どんなほそくがつくかわからない。
1から7までのほそくを、りすとひょうじしておくべきだと、かんがえるようになるよ。
<!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>
早速のご回答をありがとうございます。
通常はマトリクス形式やプルダウン形式で選んでもらうのですが、50個もありまして選ぶより入力する方が負担が軽いかな、という考えのもと作成しようと思いたったのですが、確かにご指摘の通り、リスト表示は必須ですね。ご教示、ご指摘、大変ありがとうございました。助かりました。
No.1
- 回答日時:
HTMLだけでかいけつできそうなのだけど、あえてすくりぷとでやるの?!
<select name="hoge">
<option value="" selected>-
<option value="1">1.非常にあてはまる
<option value="2">2.やや当てはまる
</select>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) ワードでテキストボックス内の文字を連動させない方法 2 2023/02/09 16:56
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 10:07
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- Visual Basic(VBA) visual basic初心者です。 visual studioで電卓を作成しています。 実行時にテ 1 2023/02/08 00:18
- Access(アクセス) capeofdragonと申します。 Access2016を使っております。 あるフォームがあり、テ 2 2022/09/09 13:18
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- Excel(エクセル) Excel グラフの軸に「表示単位の変更」の要領でテキストを追加したい 1 2022/06/08 16:27
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/15 08:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
ドラッグ & ドロップでのド...
-
struts selectbox optionsColle...
-
jQueryを使いformでsubmitした...
-
Selenium4でボタンをクリックで...
-
Ajaxのエンコードで
-
階層別の組織図の自動作成について
-
カンマ区切りのデータを配列に...
-
eval、$.eachで順番が入れ替わ...
-
変数にドットをいれることはか...
-
アコーディオンで多階層のメニ...
-
jQueryで追加した要素がマウス...
-
同一ページ移動時ハンバーガー...
-
JavascriptからPHPへのAjax通信...
-
Rails3でのクリックされたボタ...
-
Googleマップに複数のピンを立...
-
location.replaceでの移動
-
要素内を常に一番下を表示させたい
-
AjaxでJSONを受信すると、文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
Selenium Basicの件
-
IndexedDB を使ってファイルア...
-
ドラッグ & ドロップでのド...
-
<input>のvalue値をプルダウン...
-
jquery.csv2table.jsに検索窓
-
HTMLタグのidにaaaという名をつ...
-
プルダウン内容に応じてラジオ...
-
チェックボックスとラジオボタ...
-
javascriptの計算結果をvalue=""に
-
複数対応できるチェックボック...
-
ボタンクリックした際、id末尾...
-
Javascript+PHPでのデータの受...
-
jQueryのclass属性削除ができま...
-
VBAでIEのHTMLタグの要素を操作...
-
Doctrineのjoinについて
-
メールを送信するボタンでOutlo...
おすすめ情報