Q&A
社員番号とパスワードが未入力だった場合、2つメッセージを出したいのですが、
そのメッセージの間にJSで改行を入れたいのですが、下記コードでは改行されていませんでした。
デベロッパーツールで見てもエラーは出ていません。
ご教授をお願いします。
JavaScript
1var loginBtn=document.getElementById('btn'); 2 loginBtn.addEventListener('click',()=>{ 3 //社員番号 4 var number=document.getElementById('number').value; 5 //パスワード 6 var pw=document.getElementById('pw').value; 7 8 if(!number && !pw){ 9 var numberBlankMes=document.getElementById('numberBlankErr'); 10 numberBlankMes.textContent='番号必須'; 11 var br=document.createElement('br'); 12 numberBlankMes.appendChild(br); 13 document.getElementById('pwBlankErr').textContent='パスワード必須'; 14 } 15 });
HTML
1<body> 2 <div>社員番号<input type="text" name="number" id="number"></div> 3 <div>パスワード<input type="text" name="pw" id="pw"></div> 4 5 <!--メッセージ--> 6 <div id="numberBlankErr" class="errMes"></div> 7 <div id="pwBlankErr" class="errMes"></div> 8 9 <button id="btn">ログイン</button> 10</body>
回答2件
0
<br>の仕様です。
<br> の後のテキストは、テキストブロックの次の行の先頭から再開されます。
例で、下記２つはブラウザから見た目は同じです。
html
1<p>nnn</p> 2aaa
html
1<p>nnn<br></p> 2aaa
つまり、<br>の後に何もテキストを入れないと、次の行の先頭から再開されません（つまりいわゆる改行効果はないということ）。
今回のコードで確認したいなら何かしらテキストを入れると良いです。
js
1 var br=document.createElement('br'); 2 numberBlankMes.appendChild(br); 3 var tx=document.createTextNode('hogehoge'); //追加 4 numberBlankMes.appendChild(tx); //追加
投稿2020/09/17 21:10
総合スコア80875
0
javascriptというかCSSの問題じゃないですか？
divはブロック要素なので変なCSSを入れていない限りbrタグを入れなくても改行されているはずです。
下記のHTMLを実際に入れてみてそもそも意図した表示になるのか確認してみるのがいいと思います。
html
1<div id="numberBlankErr" class="errMes">番号必須<br></div> 2<div id="numberBlankErr" class="errMes">パスワード必須</div>
投稿2020/09/17 14:04
総合スコア51
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。