.innerHTMLを複数の要素に変更するにはどうすればよいですか？ JavaScript

Question

このプロジェクトを開始したら、複数の要素で.innerHTMLを変更することはできません。最初の行だけを出力します。どうしてこれなの？

document.getElementById('balance').innerHTML = 'Balance: ' + '100'; 
 
document.getElementById('tickets').innerHTML = 'Tickets: ' + '100';

<div id='balance'/> 
 
<div id='tickets'/> 
 
<div id='buy'/> 
 
<div id='pot'/>

Answer 1

マークアップが間違っているためだこと。 <div>タグは自己閉鎖ではないため、/>で閉じることはできません。

あなたはこのように、終了タグを使用する必要があります。

<div> 

</div> 

あなたのマークアップが間違って持っているので、HTMLがしようとすると、物事を修正し、それが、その前に1内のすべてのdivを出してあげるでしょう。

これは何が起こるかです：

div{ 
 
margin: 3px; 
 
padding: 10px; 
 
background: blue; 
 
border: 1px solid black; 
 
}

<div id='balance'/> 
 
<div id='tickets'/> 
 
<div id='buy'/> 
 
<div id='pot'/>

これは、生成されたマークアップです：あなたが最初のdivのinnerHTMLプロパティ、内部divを交換すると

DOMから削除されます。

Answer 2

開口部を試してみて、正しくContent Division elementsを閉じる：

document.getElementById('balance').innerHTML = 'Balance: ' + 100; 
 
document.getElementById('tickets').innerHTML = 'Tickets: ' + 100;

<div id="balance"></div> 
 
<div id="tickets"></div> 
 
<div id="buy"></div> 
 
<div id="pot"></div>

Answer 3

あなたのマークアップが間違っているためです。 <div>タグは自己閉鎖ではないため、/>で閉じることはできません。あなたがタグを閉じなかったので、ブラウザは最後にそれらを閉じて互いを入れ子にし、最初のタグのinnerHTMLを変更すると、3つの入れ子になったタグはすべて実際には存在しなくなりました2番目のJavaScript行は失敗します。

明示的にタグを閉じて、あなたのコードは動作します：

document.getElementById('balance').innerHTML = 'Balance: ' + '100'; 
 
document.getElementById('tickets').innerHTML = 'Tickets: ' + '100';

<div id='balance'></div> 
 
<div id='tickets'></div> 
 
<div id='buy'></div> 
 
<div id='pot'></div>