javascriptで、配列の英単語を順番にボタン形式で表示させています。

そこで、ボタンを表示させたあとで、ある単語のボタンのところを、別の文字で書き換えたいのですが書き換えるやり方がよくわかりません。
例えば、下記のコードで、labelArray[2] 2個めの配列を
他の文字に書き換えるにはどうしたらいいのでしょうか?
document.getElementById("IDコード").textContent =
↑のコードを使うのでしょうか?
具体的に教えて頂ければ幸いです。

下がコードです。
//順番に6個の選択肢を順番に表示させる
for ( var i = 0; i < 6; i++ ) {
var b = document.createElement("button");
b.innerHTML = labelArray[i]; //6個のボタンを順番に表示させる

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/08/31 10:38:19
  • 終了:2015/08/31 18:16:09

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4412ベストアンサー獲得回数18032015/08/31 11:32:35

もし、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]; //6個のボタンを順番に表示させる
        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];    //6個のボタンを順番に表示させる
        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>
他2件のコメントを見る
id:a-kuma3

ボタンの背景色は、こうやって変えます。

    var button = document.getElementById("word_option_1");
    button.innerHTML = "Google";
    button.style.backgroundColor = "#0000ff";  // ★背景色を青にする
2015/08/31 17:47:28
id:kajironpu

無事、成功しました。
innerHTMLのところばかり、いじっていて、ぜんぜんできませんでした。
button.styleでやるのですね。無事成功しました。本当にありがとうございました!

2015/08/31 18:15:59

その他の回答(1件)

id:pogpi No.1

pogpi回答回数357ベストアンサー獲得回数462015/08/31 10:47:24

bに上書きしていますが、配列(btns)に保持して、

btns[1].value = labelArray[1]

で、どうですか。
二番目だからインデックスは1にしました。

id:kajironpu

ありがとうございます!

2015/08/31 18:14:03
id:a-kuma3 No.2

a-kuma3回答回数4412ベストアンサー獲得回数18032015/08/31 11:32:35ここでベストアンサー

もし、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]; //6個のボタンを順番に表示させる
        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];    //6個のボタンを順番に表示させる
        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>
他2件のコメントを見る
id:a-kuma3

ボタンの背景色は、こうやって変えます。

    var button = document.getElementById("word_option_1");
    button.innerHTML = "Google";
    button.style.backgroundColor = "#0000ff";  // ★背景色を青にする
2015/08/31 17:47:28
id:kajironpu

無事、成功しました。
innerHTMLのところばかり、いじっていて、ぜんぜんできませんでした。
button.styleでやるのですね。無事成功しました。本当にありがとうございました!

2015/08/31 18:15:59

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません