Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
javascriptでテキストボックスに入力した段数のピラミッドを表示させるプログラムを作りたい
発生している問題・エラーメッセージ
生成したピラミッドが横一列に並んでしまう
### 該当のソースコード <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="リセット" onclick="reset()"><br> <a>ピラミッドの段数を指定してください</a> <input type="text" id="textboxNum" > <input type="button" onclick="dia()" value="実行"><br> <a>ここにピラミッドを描写します</a><br> <div id="span1"></div> <script> function dia(){ if(confirm("入力した段数分のピラミッドを作成します。")){ const pyramid = (n)=>{ const mid = Math.floor((2*n-1)/2); for(let row=0; row<n; ++row) { let level = '' for(let col=0; col<2*n-1; col++) { if(mid-row <=col && mid+row >= col) level+='*'; else level +=' '; } document.getElementById("span1").textContent+=level } } pyramid(document.getElementById("textboxNum").value); } ```javascript
試したこと
document.getElementById("span1").textContent+=levelのlevelに+\nを追加したり、<br>を追加したりと試してみましたが駄目でした
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
<div>は、デフォルトでは改行文字は空白として扱われます。
■ <br> で改行させる方法
javascript
1 document.getElementById("span1").insertAdjacentHTML('beforeend', `${level}<br>`);
■ 改行文字で改行させる方法
html
1<div id="span1" style="white-space: pre;"></div>
javascript
1 document.getElementById("span1").textContent += level + '\n';
投稿2021/02/08 08:59
総合スコア21695
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/08 09:44