質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

197閲覧

ラジオボタンで選択肢の文字をいじる

williamsArk

総合スコア46

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/21 14:38

編集2019/02/21 15:19

質問よろしくお願いいたします。

<input type="radio" name = "choice" value = "choice1" id="choice">選択肢1<br> <input type="radio" name = "choice" value = "choice2" id="choice">選択肢2<br> <input type="radio" name = "choice" value = "choice3" id="choice">選択肢3<br> <input type="radio" name = "choice" value = "choice4" id="choice">選択肢4<br>

以上のようなラジオボタンでクイズの選択肢を作って、Javascriptの方でクイズの選択肢を限られたものの中からランダムにだす仕組みにしたいと思っています(もちろん問題の正解になる選択肢は必ず入るように取り計らう)。

上のボタンの選択肢をJavascriptからいじりたいのですが、Javascriptの知識が乏しいため、どのようにしたら良いか困っています。ちなみに、当初は以下のようにしてみましたが、うまくいきませんでした。

var choice = document.getElementById('choice');
choice.innerHTML = 'aaaaa';

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yu-smc

2019/02/21 14:54

ちょっと質問文を読んだだけだとやりたいことが見えて来ないので、もう少し詳細に説明していただけますでしょうか?
cerfweb

2019/02/21 14:55

まず同じidが複数ある時点でJavaScriptは動きません。
cerfweb

2019/02/21 14:57

<label for="m1">とありますが、#m1はどこにあるのでしょう?
williamsArk

2019/02/21 15:11

質問を編集させていただきました。それぞれの選択肢の中身をJavascriptでいじりたいと思っています。 例えば、配列で choices = ['犬', '猫'........] みたいにして、そこからランダムで選択肢に入れてもらうようにしたいです、
kei344

2019/02/21 15:14

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
williamsArk

2019/02/21 15:20

ご指摘いただきましてありがとうございました。これでご指摘いただいた通りになったと思います。ありがとうございました。
m.ts10806

2019/02/21 15:22

やりたいことの状態、過程をもっと細分化されたほうが調べがつくようになってくると思います。 エスパーコピペ回答を待ってもおそらく自身がなんとかできるようなコードにはなりません。
m.ts10806

2019/02/21 15:24

クイズなのであれば答えがあるわけですが、どこかで答えを持たなければなりません。 それをJavaScriptコード内に持っては確認が可能なので意味がありませんし。 DBと連携させるしかないのではないでしょうか。(単なる学習のためであればかまいませんが)
cerfweb

2019/02/21 15:24

yu-smcさんと同じく、どのような結果を期待されているのかが見えてこないので追記いただけますか。
williamsArk

2019/02/21 15:28

皆さんご回答ありがとうございました。 ここでやりたいことは、 HTMLのラジオボタンの選択肢を、JavascriptでtextContent = 'りんご' のように変更したいと思っております。ラジオボタンをJavascriptで呼び出して、textContent = ''だけでは機能しなかったので、僕が知らない知識が必要なんだと思い、質問致しました。
cerfweb

2019/02/21 15:31

選択肢に割り振る配列はどこから来るのですか?
williamsArk

2019/02/21 15:35

ご回答ありがとうございました。 今は純粋にJSとHTMLのラジオを繋げてみたいので、もし可能であれば 選択肢1 = 文字列のような形で進めたいと思っている(思っていた)のです。なにせJSが初心者なため、それでも配列が要るかどうかは不明瞭ですが、もし必要なら、JSに[ ]としてその中にいくつか選択肢の言葉を入れておきたいです。このような形でできませんでしょうか。
guest

回答2

0

まず、同じHTML内に同一のidは存在できないので、choice1, choice2のように数字つけてあげます。そしてこのidをそのまま使ってスクリプト書いちゃいます。

選択肢番号を配列にし、それをランダムに並び替えて、その数字に対応したchoiceの文字列とvalueをいじればいけそうですね。
ランダム並び替えについては以下の記事から引用してます。
https://qiita.com/komaji504/items/62a0f8ea43053e90555a

js

1 2var choiceNumList = [1, 2, 3, 4]; 3var answerList = ["犬", "猫", "鳥", "俺"] 4 5for(var i = choiceNumList.length - 1; i > 0; i--){ 6 var r = Math.floor(Math.random() * (i + 1)); 7 var tmp = choiceNumList[i]; 8 choiceNumList[i] = choiceNumList[r]; 9 choiceNumList[r] = tmp; 10} 11 12choiceNumList.forEach(function(num) { 13 var elm = document.getElementById('choice' + num); 14 elm.innerHTML = answerList[num]; 15 elm.value = answerList[num]; 16}) 17

動作確認してません、バグあったらスミマセン。考え方だけご参考になれば。
テキストの中身と送信するvalue両方変えるのをお忘れなく

投稿2019/02/21 15:35

編集2019/02/21 15:36
yu-smc

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

williamsArk

2019/02/21 15:54

具体的にアドバイスありがとうございました。助かりました。参考にさせていただきます。
guest

0

ベストアンサー

jQueryでサンプル

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 var data={"q":"食べられないパンは?","a":["腐ったパン","絵に書いたパン","知らない人にもらったパン","フライパン"],"correct":3}; 5 $('#q').html("Q:"+data.q); 6 $('#a').append("<ol>"); 7 data.a.forEach(function(x,y){ 8 $('#a ol').append($('<li><label><input type="radio" name="choice" value="'+y+'">'+x+'</label></li>')); 9 }); 10 $('#a').append($('<input type="button" value="答える" disabled>')); 11 $('#a').on('change',':radio',function(){ 12 $('#a :button').prop('disabled',false); 13 }); 14 $('#a').on('click',':button',function(){ 15 alert(data.correct==$('#a :radio:checked').val()?"正解":"不正解"); 16 }); 17}); 18</script> 19<div id="q"></div> 20<div id="a"></div>

投稿2019/02/22 00:42

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

williamsArk

2019/02/22 17:51

とてつも詳しい説明をいただきまして大変助かりました。ありがとうございました。 1つ質問なのですが、この場合の引数(x,y)に対して、var dataのそれぞれのa(選択肢)はどこの箇所で渡ることになっていますか? おそらくここだと思いますが。 data.a.forEach(function(x,y){ $('#a ol').append($('<li><label><input type="radio" name="choice" value="'+y+'">'+x+'</label></li>')); var dataのそれぞれの要素(腐ったパン、絵に書いたパン、知らない人にもらったパン、フライパン)とそのValue(数値)をappendするということだから、value =" + y + "の方には自動的にその数値が、 + x + の方には自動的に選択肢の言葉が渡るようになっているのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問