そこで、ボタンを表示させたあとで、ある単語のボタンのところを、別の文字で書き換えたいのですが書き換えるやり方がよくわかりません。
例えば、下記のコードで、labelArray[2] ２個めの配列を
他の文字に書き換えるにはどうしたらいいのでしょうか？
document.getElementById("IDコード").textContent =
↑のコードを使うのでしょうか？
具体的に教えて頂ければ幸いです。
下がコードです。
//順番に６個の選択肢を順番に表示させる
for ( var i = 0; i < 6; i++ ) {
var b = document.createElement("button");
b.innerHTML = labelArray[i]; //６個のボタンを順番に表示させる
No.2
4964
2150
もし、BUTTON タグが選択肢の英単語しかないなら、document.getElementsByTagName を使って BUTTON タグの要素を全て手に入れて、その2番目（インデックスは 1 ）のボタンの文字を置き換える。
例えば、こんな感じ。
<script> // ボタンを表示する window.onload = function() { var labelArray = ["car" , "apple", "box", "dinner", "eagle", "fox"]; for ( var i = 0; i < 6; i++ ) { var b = document.createElement("button"); b.innerHTML = labelArray[i]; //６個のボタンを順番に表示させる document.body.appendChild(b); } }; // 2番目の apple を Google に置き換える function changeLabel() { var buttons = document.getElementsByTagName("button"); // 2番目 buttons[1].innerHTML = "Google"; } </script> <body> <a href="#" onclick="changeLabel()">2番目の apple を Google に置き換える</a> <p> </body>
innerHTML の代りに textContent を使っても、同じです。
もし、他にもボタンがあるなら ID を振っておいて document.getElementById でピンポイントに指定した方が良いでしょう。
<script> // ボタンを表示する window.onload = function() { var labelArray = ["car" , "apple", "box", "dinner", "eagle", "fox"]; for ( var i = 0; i < 6; i++ ) { var b = document.createElement("button"); // ★ ボタンに word_option_0 というような id をつけておく b.id = "word_option_" + i; b.innerHTML = labelArray[i]; //６個のボタンを順番に表示させる document.body.appendChild(b); } }; // 2番目の apple を Google に置き換える function changeLabel() { // 2番目のボタンの ID を指定して要素を取得する var button = document.getElementById("word_option_1"); button.innerHTML = "Google"; } </script> <body> <button onclick="changeLabel()">2番目の apple を Google に置き換える</button> <p> </body>
No.1
42859
bに上書きしていますが、配列（btns）に保持して、
btns[1].value = labelArray[1]
で、どうですか。
二番目だからインデックスは1にしました。
ありがとうございます！
No.2
49642150
ここでベストアンサー
もし、BUTTON タグが選択肢の英単語しかないなら、document.getElementsByTagName を使って BUTTON タグの要素を全て手に入れて、その2番目（インデックスは 1 ）のボタンの文字を置き換える。
例えば、こんな感じ。
<script> // ボタンを表示する window.onload = function() { var labelArray = ["car" , "apple", "box", "dinner", "eagle", "fox"]; for ( var i = 0; i < 6; i++ ) { var b = document.createElement("button"); b.innerHTML = labelArray[i]; //６個のボタンを順番に表示させる document.body.appendChild(b); } }; // 2番目の apple を Google に置き換える function changeLabel() { var buttons = document.getElementsByTagName("button"); // 2番目 buttons[1].innerHTML = "Google"; } </script> <body> <a href="#" onclick="changeLabel()">2番目の apple を Google に置き換える</a> <p> </body>
innerHTML の代りに textContent を使っても、同じです。
もし、他にもボタンがあるなら ID を振っておいて document.getElementById でピンポイントに指定した方が良いでしょう。
<script> // ボタンを表示する window.onload = function() { var labelArray = ["car" , "apple", "box", "dinner", "eagle", "fox"]; for ( var i = 0; i < 6; i++ ) { var b = document.createElement("button"); // ★ ボタンに word_option_0 というような id をつけておく b.id = "word_option_" + i; b.innerHTML = labelArray[i]; //６個のボタンを順番に表示させる document.body.appendChild(b); } }; // 2番目の apple を Google に置き換える function changeLabel() { // 2番目のボタンの ID を指定して要素を取得する var button = document.getElementById("word_option_1"); button.innerHTML = "Google"; } </script> <body> <button onclick="changeLabel()">2番目の apple を Google に置き換える</button> <p> </body>
ボタンの背景色は、こうやって変えます。
40
0
var button = document.getElementById("word_option_1");
button.innerHTML = "Google";
button.style.backgroundColor = "#0000ff"; // ★背景色を青にする
無事、成功しました。
innerHTMLのところばかり、いじっていて、ぜんぜんできませんでした。
button.styleでやるのですね。無事成功しました。本当にありがとうございました！
1
1
1
2
2
1
ボタンの背景色は、こうやって変えます。
var button = document.getElementById("word_option_1"); button.innerHTML = "Google"; button.style.backgroundColor = "#0000ff"; // ★背景色を青にする2015/08/31 17:47:28無事、成功しました。
2015/08/31 18:15:59innerHTMLのところばかり、いじっていて、ぜんぜんできませんでした。
button.styleでやるのですね。無事成功しました。本当にありがとうございました！