Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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件
0
ベストアンサー
ブラウザの開発者ツールのコンソールにエラーが出ていると思います。確認してください。
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
総合スコア21695
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/27 13:33