JavaScriptでのinnerHTML を使った要素への表示について

●やりたい事
1.a、b、c、dの一覧から任意の値を選択し、選択した値をテスト結果としてdiv id="test"に上書き表示させたい。
(例: 初期値bをdiv id="test"に表示、cを選択した場合div id="test"にcのみを表示、次にaを選択した場合div id="test"にaのみを表示したい)

2.なお、初期値はbとする。

●質問内容
start関数にて初期値を設定し、select関数にて初期値をdiv id="test"へ表示。
select関数にてa、b、c、dの一覧から任意の値を選択し、選択した値をdiv id="test"に表示出来たのですが、上書き表示ではなく追記されました。
(結果例: 初期値bをdiv id="test"に表示、cを選択した場合div id="test"にbcと表示、次にaを選択した場合div id="test"にbcaと表示される)

何処を修正すれば、上記●やりたい事のように上書き表示されるのでしょうか？

<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />

</head>
<body>
テスト結果『
  <div id="test"></div>
』が選択されました。

<ul>
<li id="a" onclick='select("a") '>a</li>
<li id="b" onclick='select("b") '>b</li>
<li id="c" onclick='select("c") '>c</li>
<li id="d" onclick='select("d") '>d</li>
</ul>

  <script>

//初期値の設定
window.addEventListener('DOMContentLoaded', function start(){

var n =(function(N){
return N;
}("b")); //初期値

select(n);
});

//値を選択する為の関数
function select(p){
const result = document.getElementById("test");
result.innerHTML += p;

}

</script>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

result.innerHTML += p;で値を継ぎ足しています。書き換えたければ、単なる代入でいいでしょう。

本題ではありませんが、innerHTMLを使うとHTMLとして構築できるので、XSSの危険があります。HTML構造を変える必要がないなら、textContentを使うほうが適切です。

投稿2019/11/08 04:28

maisumakun

総合スコア145975

ざっとこんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  [].forEach.call(document.querySelectorAll('[data-res]'),x=>{
4    x.addEventListener('click',()=>{
5      document.querySelector('#test').textContent=x.dataset["res"];
6    });
7  });
8  document.querySelector('[data-res=b]').click();
9});
10</script>
11テスト結果『
12  <div id="test"></div>
13』が選択されました。
14<ul>
15<li data-res="a">a</li>
16<li data-res="b">b</li>
17<li data-res="c">c</li>
18<li data-res="d">d</li>
19</ul
20