forループを使用してJavaScriptで複数の時間を表示する方法

JSを学んでいました。W3の学校から、属性の長さをチェックするこのプログラムに遭遇しました。私は後で、要素が持つ属性の名前を表示するように変更しました。ここでは、コードforループを使用してJavaScriptで複数の時間を表示する方法

function myFunction() { 
 
    for (var counter = 0; counter < 2; counter++) 
 
    var a = document.getElementById("myBtn").attributes[counter].name; 
 
    document.getElementById("output").innerHTML = a; 
 
}

<html> 
 

 
<body> 
 
    <p>Click the button to see how many attributes the button element have.</p> 
 
    <p id="output"> 
 

 
    </p> 
 
    <button id="myBtn" onclick="myFunction()">Try it</button> 
 
</body> 
 

 
</html>

がある

私はO/Pはようであることが予想：

onclickのID

しかし、いくつかの理由でそれが唯一の最後の属性を表示

要素がこの場合には をクリックしたときならば クラスなどが表示されます。

その理由は何ですか？

出典

2017-01-17 Mehul Chachada

あなたがその取得上書きループをrunnigされています。ここでは全体のスニペットがあります –

あなたはあなたのコードでは非常に単純なミスを持っています。あなたのコードはまず<p>要素のinnerHTMLを "id"に設定します。次に、次の属性、つまり「onclick」で上書きします。この問題を解決するには、<br>がお互いから属性を区切るためだけにある

document.getElementById('output').innerHTML = a

document.getElementById('output').innerHTML += a + "<br>"

に変更。

function myFunction() { 
 
    for (var counter = 0; counter < 2; counter++) { 
 
    var a = document.getElementById("myBtn").attributes[counter].name; 
 
    document.getElementById("output").innerHTML += a + "<br>"; 
 
    } 
 
}

<html> 
 

 
<body> 
 
    <p>Click the button to see how many attributes the button element have.</p> 
 
    <p id="output"> 
 

 
    </p> 
 
    <button id="myBtn" onclick="myFunction()">Try it</button> 
 
</body> 
 

 
</html>

出典

2017-01-17 13:12:19

はあなたのコードがに設定された最後の値を表示し

function myFunction() { 
var a=""; 
    for (var counter = 0; counter < 2; counter++){ 
    a+= document.getElementById("myBtn").attributes[counter].name; 
} 
    document.getElementById("output").innerHTML = a; 
}

代わりに、以下試してみてください。そして、あなたの代わりにあなたが現時点で

var a = ....

出典

2017-01-17 13:06:04

で上書きし、に属性の名前を追加/追加しないでください、あなたがされて再割り当てaたびにループの実行（var a = ...）：

function myFunction() { 
    for (var counter = 0; counter < 2; counter++) { 
    var a = document.getElementById("myBtn").attributes[counter].name; 
    } 
    document.getElementById("output").innerHTML = a; 
}

これは、aが最後のアイテムになることを意味します。

おそらく代わりに、配列に各属性を追加します。

function myFunction() { 
    var arr = []; 
    for (var counter = 0; counter < 2; counter++) { 
    arr.push(document.getElementById("myBtn").attributes[counter].name); 
    } 
    document.getElementById("output").innerHTML = arr.join(' '); 
}

また、あなたのスコープがどこにあるのために中括弧を使用します。 outputがループの後にになるようにします。

出典

2017-01-17 13:06:44

これは、要素のinnerHTMLを変更するためです。これは、その要素のHTML全体を変更することを意味します。

現在のinnerHTMLで結果を連結したり要素を作成したりして、その中に値を追加してドキュメントに追加することができます。例えば

：

var output = document.getElementById('output'); 
output.innerHTML = output.innerHTML + ' - ' + a;

出典

2017-01-17 13:09:20 bini

forループを使用してJavaScriptで複数の時間を表示する方法

答えて

関連する問題