HTMLのラジオボタンの選択肢を上書きしたい

###前提・実現したいこと
html+javascriptで2択のクイズを作成しています。
選択肢を上から上書きしたいです。

###発生している問題・エラーメッセージ
エラーメッセージは特になし（表示されません）
id="que"の方はうまく変更されていますが、id="choice1"のラジオボタンの方がうまく変更できません。

###該当のソースコード

/*---HTML---*/
 <body>
        <div>
           <h1>問題集1</h1>>
           <p id="que">ここに問題が表示されます</p> 
           <div> <input id="choice1" type="radio" name="choice">○○○<br></div>
           <div> <input id="choice2" type="radio" name="choice">×××</div>
           <div><input type="button" value="回答する" onclick="button_click();"></div>
        </div>
 </body>

/*---javascript---*/

window.addEventListener("load",function() {
  document.getElementById('que'). innerHTML = "文字列の変更を行います";
  document.getElementById('choice1').innerHTML ="選択肢A";
},false);

function button_click() {
    var radio = document.getElementById('choice1');
    if(radio.checked) {
        console.log("正解");
    }else {
        console.log("間違い");
    }

###試したこと
htmlやjavascriptの書籍等を見ましたが理解できませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

ベストアンサー

「○○○」を「選択肢A」に書き換えたいという趣旨でよろしいでしょうか？
この場合◯◯◯はid=choice1に包含されておらずとなりのノードです
したがって今回のケースであればこうするとよいでしょう

javascript
1window.onload=function() {
2  document.getElementById('que').innerHTML = "文字列の変更を行います";
3  document.getElementById('choice1').nextSibling.nodeValue="選択肢A";
4};

なお、選択肢Aに変更後、ラジオボタンのvalueを変更するのであれば
別途

javascript
1document.getElementById('choice1').value="A";
2
3```的な処理を入れればよいでしょう

投稿2016/08/12 03:21

yambejp

総合スコア114779

michiaki

2016/08/12 05:04

ご回答ありがとうございました。私の理解では、上の<p>と同じタグ付けしたつもりですが、実際は隣のノード？にタグかあるいは隣のタグに直接操作する必要があるんですね。ラジオボタンのアドバイスまで頂いたのでベストアンサーにさせて頂きます。

行動規範の内容に同意します

別案として、label要素をつけるという方法とか。

HTML
1<div>
2   <h1>問題集1</h1>
3   <p id="que">ここに問題が表示されます</p> 
4   <div><input id="choice1" type="radio" name="choice"><label for="choice1">○○○</label><br></div>
5   <div><input id="choice2" type="radio" name="choice"><label for="choice2">×××</label></div>
6   <div><input type="button" value="回答する" onclick="button_click();"></div>
7</div>

JavaScript
1window.addEventListener( 'load', function() {
2	document.getElementById( 'que' ).innerHTML = "文字列の変更を行います";
3	document.querySelector( 'label[for="choice1"]' ).innerHTML = "選択肢A";
4}, false );
5```**動くサンプル：**[https://jsfiddle.net/ufxpsdaa/](https://jsfiddle.net/ufxpsdaa/)

投稿2016/08/12 04:23

kei344

総合スコア69400

michiaki

2016/08/12 04:57

ご回答ありがとうございました。 ○○○はIDが実質的についていないという理解でいいのでしょうか？やりたいことはできました。

kei344

2016/08/12 05:03

> ○○○はIDが実質的についていない付いていません。要素を取得する手段として、getElementById（IDで取得）/ getElementsByClassName（クラス名で取得）/ querySelector / querySelectorAll などがあり、今回使った querySelector は「CSS セレクタにマッチする文書中の最初の要素」を取得するものです。

michiaki

2016/08/13 00:35

ご回答ありがとうございます。 inputタグにIDがついて後の○○○は別のタグ付けが必要ということですね。わかりました。ありがとうございました。

行動規範の内容に同意します

あなたの回答