以下は、セレクトボックス1と2でそれぞれ松山市と高松市を選んだら、配列を呼び出すことができるプログラムです。
<script type="text/javascript">
function change() {
if (document.getElementById("selbox")) {
selboxValue = document.getElementById("selbox").value;
if (selboxValue == "1") {
//文字1を表示
document.getElementById("txt1").style.display = "";
//文字2を非表示
document.getElementById("txt2").style.display = "none";
} else if (selboxValue == "2") {
//文字2を表示
document.getElementById("txt2").style.display = "";
//文字1を非表示
document.getElementById("txt1").style.display = "none";
}
}
}
function kotae()
{
ten=0
if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市"))
{f.q1.style.backgroundColor="aqua ";ten = ten + 50}
else f.q1.style.backgroundColor="red"
if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25}
else f.q3.style.backgroundColor="red"
if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25}
else f.q4.style.backgroundColor="red"
f.tokuten.value=ten
const keywords = ['あいうえお','かきくけこ', 'さしすせそ'];
if (f.tokuten.value=50) {
for (let i = 0; i < keywords.length; i++) {
console.log(f.rank.value=keywords[0]);
}}
else if(f.tokuten.value >=20){f.rank.value = 'B'}
else if(f.tokuten.value >=15){f.rank.value = 'C'}
else if(f.tokuten.value <10){f.rank.value = 'D'}
//ここまで
}
</script>
<body>
<form name="f">
愛媛県の県庁所在地は
<select name="q1">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。
<p>
香川県の県庁所在地は
<select name="q2">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
愛知県の県庁所在地は
<select name="q3">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
石川県の県庁所在地は
<select name="q4">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
<input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p>
<input name=tokuten size="6">点
<!--HTMLここから-->
<input name=rank class="hoge">ランク
<!--HTMLここまで-->
しかし、僕はもうちょっと踏み込んだところまで行きたいのです。
ブラウザに表示させたいのです。
document.writeで書くと別のページに遷移してしまうし、
一方でalertだと文章が読みづらいです。
ブラウザに配列を表示するものは以下のプログラムですが、
<script>
var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成'];
for (var i = 0; i < todo.length; i++) {
var todoList = document.createElement('li');
todoList.textContent = todo[i];
document.getElementById('list').appendChild(todoList);
}
</script>
ただ、これだとセレクトボックスで松山市と高松市を選んだ場合の表示ができません。どうしたらいいのでしょうか。
どうしたらいいのでしょうか。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんなんでどうでしょう?
変な所消しちゃいましたけど
==============ソース==================
<html>
<head>
<!DOCTYPE html>
<meta charset="utf-8">
<script type="text/javascript">
function change(selbox) {
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
switch(selbox.value){
case '1':
txt1.style.display = "";
txt2.style.display = "none";
break;
case '2':
txt1.style.display = "none";
txt2.style.display = "";
break;
case '3':
//ここに何か記載する
break;
case '4':
//ここに何か記載する
break;
default:
}
var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成'];
var str='';
for (var i = 0; i < todo.length; i++) {
str += todo[i] + '<BR>';
}
document.getElementById('message_area').innerHTML = str;
}
</script>
<body>
<form name="f">
愛媛県の県庁所在地は
<select name="q1" onchange="change(this)">
<option value="">選択肢</option>
<option value="1">名古屋市</option>
<option value="2">松山市</option>
<option value="3">金沢市</option>
<option value="4">高松市</option>
</select>
です。
<p>
香川県の県庁所在地は
<select name="q2" onchange="change(this)">
<option value="">選択肢</option>
<option value="1">名古屋市</option>
<option value="2">松山市</option>
<option value="3">金沢市</option>
<option value="4">高松市</option>
</select>
です。<p>
愛知県の県庁所在地は
<select name="q3">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
石川県の県庁所在地は
<select name="q4">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
テキスト1<input type="text" id="txt1" name="txt1"><BR>
テキスト2<input type="text" id="txt2" name="txt2"><BR>
<div id="message_area" />
<body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで<select>の<option...
-
javascriptでセレクトボックス...
-
addclassがうまく働きません
-
<input>の選択肢をプルダウンメ...
-
VBScriptでHTMLのセレクトボッ...
-
JavascriptからSQLへ繋ぎ方が分...
-
selectを変更不可にしたい
-
【javascript】連想配列からセ...
-
プルダウン選択を変更すると、...
-
selectが変更されたらnameを指...
-
連想配列からセレクトボックス...
-
javascriptでの時間計算
-
今日の日付を自動的にセレクト...
-
同じ名前のセレクトがある場合...
-
プルダウンで選択した項目にあ...
-
プルダウンの値によって活性・...
-
selectの初期値を設定したい
-
まったく同じ<select>フォーム...
-
select option value が IE だ...
-
selectボックスで選択数を制限...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報