如何在 HTML 页面上显示来自 JS 循环的输出

Question

我试图让用户输入显示他们想要的“+++”行数。 我已经尝试了很多东西，但没有任何效果！！！ 我目前正在使用 document.getElementById('square').innerHTML = text; ，因为我的代码显示它但没有发生任何事情，我也没有在我的控制台中收到任何错误消息。 请帮忙！！！

 function loop4(){ var rows = +prompt ('Please enter the ammount of rows you would like') var num = 0 var text = '' while (num !==rows){ text+= '+++ \\n'; num +=1; } document.getElementById('square').innerHTML = text;

 <input class='button' id='square' type='button' onclick="loop4()" value='Draw Square' /> <br>

Answer 1

我修复了它，并添加了一点:)

您在函数末尾缺少括号。 此外， input 元素不会采用.innerHTML 。 如果您希望它位于按钮上，您可以设置.value ，但按钮不能采用.innerHTML 。

 function loop4() { var rows = +prompt('Please enter the ammount of rows you would like') var num = 0 var text = '' while (num !== rows) { text += '+'.repeat(rows) +' <br>'; num += 1; } document.getElementById('square').innerHTML = text; }

 <input class='button' id='square-btn' type='button' onclick="loop4()" value='Draw Square' /> <br> <pre id="square"> </pre>

Answer 2

尝试将文本放在元素中，例如 pre

 function loop4(){ var rows = +prompt ('Please enter the ammount of rows you would like') var num = 0 var text = '' while (num !==rows){ text+= '+++ \\n'; num +=1; } document.getElementById('square').innerText = text; }

 <input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br> <pre id="square"></pre>

Answer 3

也许您可以采用以下方法，通过为每行添加唯一的 DOM 元素。 对于每一行，您将使用 '+++' 字符填充innerHTML字段。

考虑以下：

 function loop4(){ var rows = +prompt ('Please enter the ammount of rows you would like') var num = 0; while (num !==rows){ num +=1; // Create this row's div element var row = document.createElement('div'); // Populate row with + characters row.innerHTML = '+++'; // Add the row to a display area div, which is a new div intended // for displaying the desired result document.getElementById('square').append( row ); } } // Also, be sure to add this to avoid syntax errors

 <!-- Remove id=square from button --> <input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br> <!-- Add this div to display square --> <div id="square"></div>