出力した文字を綺麗に枠に収めたい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
VScodeにて簡易的なチケット購入フォームを作成しております。
入力した内容を一つの枠に収めて出力する機能を実装中に以下の問題が発生しました。

発生している問題

「こちらの情報で確認しました。」の文から下が表示されない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="original.css">
6    <title>チケット購入フォーム</title>
7</head>
8<body>
9    <h1>チケット購入フォーム</h1>
10    <h4>・名前</h4>
11    <input type="text" id="user-name" size="40" maxlength="20">
12    <h4>・日程</h4>
13    <h6>月</h6>
14    <input type="text" id="month" size="20" maxlength="10">
15    <h6>日</h6>
16    <input type="text" id="day" size="20" maxlength="10">
17    <h4>・時間</h4>
18    <h6>時</h6>
19    <input type="text" id="hour" size="20" maxlength="10">
20    <h6>分</h6>
21    <input type="text" id="minute" size="20" maxlength="10">
22    <h4>・視聴作品</h4>
23    <input type="text" id="movie-title" size="40" maxlength="20">
24    <h2></h2>
25    <button id="original">確認</button>
26    <div id="result-area"></div>
27    <script src="original.js"></script>
28</body>
29</html>

JavaScript
1'use strict';
2const userNameInput=document.getElementById('user-name');
3const MonthInput=document.getElementById('month');
4const DayInput=document.getElementById('day');
5const HourInput=document.getElementById('hour');
6const MinuteInput=document.getElementById('minute');
7const movieTitleInput=document.getElementById('movie-title');
8const originalButton=document.getElementById('original');
9const resultDivided=document.getElementById('result-area');
10//各種変数の宣言
11
12function removeAllChildren(element){
13    while(element.firstChild){
14        element.removeChild(element.firstChild);
15    }
16}
17
18originalButton.onclick=()=>{
19    const userName=userNameInput.value;
20    const Month=MonthInput.value;
21    const Day=DayInput.value;
22    const Hour=HourInput.value;
23    const Minute=MinuteInput.value;
24    const movieTitle=movieTitleInput.value;
25    if(userName.length===0||Month.length===0||Day.length===0||Hour.length===0||Minute.length===0||movieTitle.length===0){//記入漏れがある場合、ボタンをクリックしても反応しない
26        return;
27    }
28
29    removeAllChildren(resultDivided);
30    const header=document.createElement('h3');
31    header.innerText='こちらの情報で確認しました。';
32    resultDivided.appendChild(header);
33
34    //入力された情報を出力
35    const paragraph=document.createElement('p');
36    paragraph.innerText='名前：' + userName + '　　　　' + Month + '月'+ Day + '日'<br>Hour + '時' + Minute + '分'<br>movieTitle;
37    resultDivided.appendChild(paragraph);
38};

CSS
1body{
2    background-color: #ffb1ff;
3    color: #fdffff;
4    width: 500px;
5    margin-right: auto;
6    margin-left: auto;
7}
8button{
9    padding: 5px 20px;
10    background-color: #d81da9;
11    color: #fdffff;
12    border-color: #e72ee7;
13    border-style: none;
14}
15input{
16    height: 20px;
17}
18p{
19    padding: 5px;
20    border: 1px solid #fdffff;
21}

試したこと

paragraph2,paragraph3などのように各情報を分割した変数で出力した
↓
各項目が別々に枠で囲われた

補足情報（FW/ツールのバージョンなど）

Visual Studio Codeを使用

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

回答1件

ベストアンサー

ブラウザの開発者ツールのコンソールにエラーが出ていると思います。確認してください。

js
1paragraph.innerText='名前：' + userName + '　　　　' + Month + '月'+ Day + '日'<br>Hour + '時' + Minute + '分'<br>movieTitle;

文字列引用符の外側に<br>というタグを書くことはできません。
innerText はタグを解釈しません。

ここは innerHTML を使うべきかと思います。あとテンプレートリテラルを使うとコードが簡潔になるのでオススメです。

js
1paragraph.innerHTML = `名前：${userName}　　　　${Month}月${Day}日
2<br>${Hour}時${Minute}分<br>${movieTitle}`;

投稿2021/11/26 15:13

int32_t

総合スコア21012

Hagiaki

2021/11/27 13:33

無事に収まりました

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！