配列の値を取得してlabelに表示したいです。

Question

<script type="text/javascript">

    function ranAry() {
        var fruits =  ["りんご", "みかん", "ぶどう"];
        document.getElementById("dat").value = fruits[Math.floor(Math.random() * fruits.length)];
    }

    </script>

       <form>

  　<input type="button" value="表示" onClick="ranAry()" id="textForm">　
    <input type="text" id="dat" placeholder="ここに表示">

        </form>

　　上記コードを実行すると、テキストフォームに値をランダム表示します。
しかし、私は、テキストフォームではなく、ラベルに値をランダムに表示したいです。
そこで<input type="text" id="dat" placeholder="表示">の部分
を削除し、<label id="dat">ここに表示</label>と入れてみました。
そうすると上手く動きません。
間違っている理由と正しいコードを教えていただきたいです。
宜しくお願い致します。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[popipi_1]

ありがとうございます。編集しました。

Answer 1

<label id="dat">ここに表示</label>の場合、
valueでなく、textContent or innerTextプロパティに入れれば、反映されます。

document.getElementById("dat").innerText = fruits[Math.floor(Math.random() * fruits.length)];

document.getElementById("dat").textContent = fruits[Math.floor(Math.random() * fruits.length)];

Comments

[popipi_1]

うまくいきました（^^）/ ありがとうございました。

Answer 2

<input type="button" value="表示" onClick="ranAry()" id="textForm">
<label id="dat">ここに表示</label>

function ranAry() {
  var fruits =  ["りんご", "みかん", "ぶどう"];
  document.getElementById("dat").innerText = fruits[Math.floor(Math.random() * fruits.length)];
}
```**動くサンプル：**[https://jsfiddle.net/dtw6yx0m/](https://jsfiddle.net/dtw6yx0m/)

---


【HTMLElement.innerText - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/innerText](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/innerText)

【element.innerHTML - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)

【Element.insertAdjacentText() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentText](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentText)

【element.insertAdjacentHTML - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)

Comments

[popipi_1]

回答ありがとうございました！