はじめ

コンソールに出力された文字列をHTML上に表示しようと苦戦したので、
まとめがてら本記事にて整理したいと思います。

経緯

JavaScriptにてオブジェクトを設定し、ランダムな整数を出力する関数を用いてオブジェクト内の要素を参照できることを学びました。

JSで学んだこと

今回はobjectという変数を宣言し、この中身の要素を参照します。

const object = {
    1:`one`,
    2:`two`,
    3:`three`,
    4:`four`,
    5:`five`
}

ランダムな整数を参照するため、randomNumという関数を宣言します。

const randomNum = () => Math.flooor(Math.random() * 5) + 1;

これで、引数を渡すと1~5の値を返してくれる関数を設定しました。

コンソール上で思い描いていた通りに結果が返ってくるか確認します。

> let num = randomNum(); // ランダムな整数を一意にするため宣言しておきます
> console.log(`${num}のスペルは${object[num]}です！`);
  2のスペルはtwoです

これにてオブジェクト内の要素を参照し、
コンソール上にてテキスト化して起こすことが出来ました。

ふと湧いた疑問

ここまでが学んだ内容でしたが、
コンソール上のテキストをhtml上に表示する場合、どんなコードを用いればいいのか疑問に思いました。

いくつか方法があるようでしたのでコードのみ紹介いたします。

innerHTML
document.write
insertAdjacentHTML
alert

今回はinnerHTMLを採用してテキストを表示することにしました。
innerHTMLプロパティは、MDNにて以下のような説明があります。

innerHTML に値を設定すると、要素のすべての子孫を削除して、htmlString の文字列で与えられた HTML を解釈して構築されたノードに置き換えます。

つまり、指定した要素を新しい要素へ置き換え、動的なWebページを作成できるということです。
div内にjsファイルにて定めた文字列と画像を表示したいという目的からinnerHTMLを扱うことにしました。

余談

"DOM"と呼ばれるものがあります。

JavaScriptなど色々なプログラミング言語などから、
オブジェクトを扱うためのAPIを提供しています。

上記引用文のようにHTMLドキュメント内の要素や要素に含まれるテキストのデータをオブジェクトとしてみなし、
HTML-JS間でやりとりすることができます。
本記事では、このDOMという考え方を用います。

HTMLの要素を参照するには

実際にHTMLの要素を参照する方法をご紹介します。
以下のHTMLコードをご覧ください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="changeCode">
        数字のスペルは？
    </div>
    <script src="qiita.js"></script> //実行するJSファイル名を指定
</body>
</html>

body内にてid="changeCode"を持ったdivが存在し、この中身を編集したいと考えています。
ただid要素を宣言しただけではこのdiv要素を編集することはできません。
そこで、getElementById、innerHTMLと呼ばれるプロパティを使用します。

// JSファイルにて
let changeDiv = document.getElementById(`changeCode`)
function functionNum() {
    let num = randomNum(); //ランダムな整数を一意に宣言
    changeDiv.innerHTML = `${num}のスペルは${object[num]}です！` //div要素の中身の変更
}

下記リンクにgetElementByIDについて詳しいことが書かれていますが、
HTMLコードの中からIDを用いて参照するオブジェクトを指定するというのがgetElementByIDの役割となります。

また、前述のとおりinnerHTMLは指定した要素を新しいものへ入れ替えることが可能です。
これらのコードを実行すれば文章が変更されるはずですが、肝心のJSを実行するものがありません！

JSで作った関数を実行するには

これまでの章にて「JSにてHTMLのdiv要素を変更する」という機能を作成しました。
「HTML上からJSで作成した関数を実行する」という機能を作成すれば、
文章を変更することができるはずです。

// HTMLファイルにて
<body>
<button onclick="functionNum()">
        ボタンを押してください
</button>
</body>

今回、本機能をbuttonを用いて作成しました。

上記リンクにて、button内にあるonclickプロパティについてこのような説明がなされています。

onclick属性とは、ユーザが要素をクリックした際に起動する処理を指定するイベント属性です。

onclickにて指定した処理は、jsファイル内にて作成したfunctionNum()という関数です。
これによって、関数を交えた複雑な処理を実行することができるようになりました。

今回の実行結果と用いたコード全文は以下のようになります。

実行結果

実行前
実行後

使用したコード

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="functionNum()">
        ボタンを押してください
    </button>
    <div id="changeCode">
        数字のスペルは？
    </div>
    <script src="qiita.js"></script>
</body>
</html>

JavaScript

const object = {
    1:`one`,
    2:`two`,
    3:`three`,
    4:`four`,
    5:`five`
}

const randomNum = () => Math.floor(Math.random() * 5) + 1;

let changeDiv = document.getElementById(`changeCode`)
function functionNum() {
    let num = randomNum();
    changeDiv.innerHTML = `${num}のスペルは${object[num]}です！`;
}

まとめ

コンソールに出力された文字列を、innerHTMLプロパティを用いてHTML上に表示する方法を解説しました。
※innerHTML：今回扱った文字列の変更だけではなく、画像やURLを動的に表示させるといったことも可能。

まとめ

getElementById…HTMLコードの中からIDを用いて参照するオブジェクトを指定する
onclick…クリックした際の動作処理を決定する
innerHTML…指定した要素を新しい要素へ置き換える

参考文献

1.DOMとは
2.【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法
3.【JavaScript】innerHTMLの使い方
4.【JavaScript入門】getElementByIdを完全理解する3つのコツ！
5.【HTML】onclick属性でクリック時の処理を指定する方法を解説
6.MDN（JavaScript）

【Javascript】コンソールに出力された文字列をHTML上で表示する

はじめ

経緯

JSで学んだこと

ふと湧いた疑問

余談

HTMLの要素を参照するには

JSで作った関数を実行するには

まとめ

参考文献