初めに

ここではHTMLにJavaScriptを使ってランダムに文字を表示させる方法について説明します。
JavaScriptからHTMLに反映させるために自分が行っていた非推奨な例と推奨される例について紹介します。

非推奨方法

HTML

<script>
let omikuji = Math.floor(Math.random() * 5);
if(omikuji == 0){
    document.write("大吉")
}
else if(omikuji == 1){
    document.write("中吉")
}
else if(omikuji == 2){
    document.write("吉")
}
else if(omikuji == 3){
    document.write("末吉")
}
else if(omikuji == 4){
    document.write("凶")
}

こちらは私が初めに行ったコードです。
一見HTML上で行えて便利かと思いますがこちらは非推奨とされています。
ブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮し非推奨とされているそうです。

推奨方法

HTML

<p>おみくじの結果</p>

JavaScript

const result = document.querySelector("p")
const omikuji =["大吉","中吉","吉","末吉","凶"]
const number = Math.floor(Math.random() * omikuji.length);
result.textContent = omikuji[number]

こちらは私が改良したコードです。HTMLとJavaScripをつなげる「DOM」を活用しました。

DOMとは

そもそもDOMとは一体何かを説明します。
DOMはWEBページ（HTML）とJavsScriptを接続するような役割を持っています。
HTML上の「要素」を取得して「操作」を行います

取得

HTML上の要素を取得します。
今回JavaScriptの方で１番目に行った const result = document.querySelector("p") が該当します。
取得の仕方にも種類があるのでいくつか紹介します。

getElementById

HTML上で設定したIDの要素を取得します

HTML

<p id = "sampleID">おみくじの結果</p>

※「id = "sampleID"」を設定しました

JavaScript

const result = document.getElementById("sampleID")

getelementsByTagname

HTML上の要素を取得します

HTML

<p>おみくじの結果</p>

JavaScript

const result = document.getElementsByTagName("p")

getElementsByClassName

HTML上で設定したclassの要素を取得します

HTML

<p class = "sampleclass">おみくじの結果</p>

※「class = "sampleclass"」を設定しました

JavaScript

const result = document.getElementsByClassName("sampleclass")

querySelector

対象となる要素の一番最初のものを取得する

HTML

<p id = "sampleID">おみくじの結果</p>
<p class = "sampleclass">今日の天気</p>
<p class = "sampleclass">明日の天気</p>

※別の要素を追加しました

JavaScript

const result = document.querySelector("p")　　　　　　 →　　「おみくじの結果」を取得
const hako = document.querySelector("sampleclass")　  →　　「今日の天気」を取得

querySelectorAll

対象となる要素すべてを取得する

HTML

<p id = "sampleID">おみくじの結果</p>
<p class = "sampleclass">今日の天気</p>
<p class = "sampleclass">明日の天気</p>

JavaScript

const resulr = document.querySelectorAll　　→　　すべて取得

操作

先ほど取得した要素のデザインの変更したりテキストの変更したりできます。
今回は一番下の result.textContent = omikuji[number] が該当します。

innerHTML

要素に含まれるすべてのテキスト（<br>等を含む）

HTML

<p>おみくじ<br>の<br>結果</p>

※改行の <br> を追加しました

JavaScript

document.querySelector("p").innerHTML

結果

おみくじ<br>の<br>結果

textContent

すべての要素テキスト（<br>等を含まない）

HTML

<p>おみくじ<br>の<br>結果</p>

JavaScript

document.querySelector("p").textContent

結果

おみくじの結果

innerText

表示されてるすべての要素のテキスト（<br>等反映される）

HTML

<h1>あいうえお<br>かきくけこ<br>さしすせそ</h1>

JavaScript

document.querySelector("p").innerText

結果

おみくじ
の
結果

違いを分かりやすくすると

innerHTML

おみくじ<br>の<br>結果

textContent

おみくじの結果

innerText

おみくじ
の
結果

innerHTMLはそのまま、textContentはテキストだけ、innerTextは改行が反映されていることがわかります。

まとめ

ランダムで文字を表示したい（HTMLとJavaScriptを紐づけたい）場合はDOMを使う
Document.writeのやり方は推奨されない
DOMは取得と操作がある

最後に

ここではランダムに文字を表示される方法について自分が行った非推奨方法と推奨方法についてそして推奨方法で使ったDOMについて簡単に説明しました。
今回自分が行ったやり方よりも良いものがありましたらアドバイスしていただきたいです！！
最後までご覧いただきありがとうございました。