のdocument.getElementByIdクラスは、アレイ全体の代わりに、各要素のアレイの要素がHTMLスパンに表示され、このコードで

Question

<p><span id="sr" class="btn">elements of the array</span></p>

for(var i = 0; i < myarray.length; i++) 
 
{ 
 
\t var sr = (function(val) { 
 
     btn = document.createElement('button'); 
 
     btn.data = val; 
 
     btn.innerHTML = val; 
 
     btn.addEventListener('click', checkAnswer); 
 
     document.body.appendChild(btn); 
 
\t \t return btn.data = val; 
 
    })//(myarray[i]); 
 
document.getElementById("sr").innerHTML = myarray; 
 
}

に適用されます。クラス "btn"で定義されているように、各要素をボタンとして表示する必要があります。ただし、クラスは配列のスタイルを単一のボタンとしてではなく全体として変更します。各ボタンのスタイルを定義する正しい方法は何ですか？

私はdocument.getElementById("sr").innerHTML = myarray.class="btn";を試しました。それは動作しません。確かに正しい構文ではありません。何か案が？

Answer 1

達成したいのですか？

let container = document.getElementById('sr'); 
 
let array = ['element1', 'element2', 'element3']; 
 

 
function checkAnswer() { 
 
    console.log('Selected answer: ', this.textContent); 
 
} 
 

 
for (let i = 0; i < array.length; i++) { 
 
    let button = document.createElement('button'); 
 
    button.textContent = array[i]; 
 
    button.addEventListener('click', checkAnswer); 
 
    container.appendChild(button); 
 
}

<p><span id="sr" class="btn"></span></p>

Answer 2

私が正しくあなたを理解していれば、あなたはmyarray要素を使用して、動的に作成されたボタンにbtnクラスを追加します。

各ボタンのスタイルを定義する正しい方法は何ですか？

私はdocument.getElementById（ "sr"）を試しました。innerHTML = myarray.class = "btn";

あなたは.dataプロパティを作成するのではなく、element.classList.add('your-class');

var myarray = ["Array", "elements"]; //let's say 
 
for (var i = 0; i < myarray.length; i++) { 
 
    var sr = (function(val) { 
 
    btn = document.createElement('button'); 
 
    btn.data = val; 
 
    btn.innerHTML = val; 
 
    btn.classList.add("btn") 
 
    btn.addEventListener('click', checkAnswer); 
 
    document.body.appendChild(btn); 
 
    return btn.data = val; 
 
    })(myarray[i]); 
 
    //document.getElementById("sr").innerHTML = myarray;//I don't know why this line here? 
 
} 
 

 
function checkAnswer(e){ 
 
}

Answer 3

使用Element.datasetを使用することができます。 iをIIFEに渡します。あなたが#srの.innerHTMLとして配列myarrayを表示しようとしている場合.innerHTMLがStringからArrayをキャストとして、.innerHTMLでmyarray設定の最後に先頭と"]"に"["を連結します。

作成した要素を#srに追加する場合は、document.bodyに要素を追加しないでください。ただし、#srに要素を追加しないでください。

function checkAnswer() { 
 
    console.log(this.dataset.value) 
 
} 
 

 
var myarray = [1, 2, 3]; 
 

 
for (var i = 0; i < myarray.length; i++) { 
 
    (function(val) { 
 
    var btn = document.createElement('button'); 
 
    btn.dataset.value = val; 
 
    btn.className = "btn"; // set `btn` `.className` to `"btn"` 
 
    btn.innerHTML = val; 
 
    btn.addEventListener('click', checkAnswer); 
 
    document.body.appendChild(btn); 
 
    // document.getElementById("sr").appendChild(btn); 
 
    })(i); 
 
} 
 

 
document.getElementById("sr").innerHTML = "[" + myarray + "]";

<p><span id="sr" class="btn">elements of the array</span></p>