javascript - 如何在 HTML 中显示数组以便将数字分成新行

标签 javascript

我试图在 HTML 中显示一个数组,以便将显示的整数分成一个新行。 JS 将它们换行,是的,但是当数字是 0 - 9 之类的单个数字时,它们不会换行。换行的数字仅从两位数开始,即。 10 向上。

这是我的 JS 代码:我认为函数 displayArray 中的 FOR 循环有问题,但我就是想不通。这是几乎可以解决这个问题的最后几件作品之一!

提前感谢您的贡献!

//Array to hold statistics of number of pages read per sitting  over a period of time
const myArray = [];
//Function to calculate number of pages read
let calculate = () => {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  document.getElementById("number1").value = ""; // make START empty
  document.getElementById("number2").value = ""; //make END empty
  let totalNumber = end - start; 
  myArray.push(totalNumber); //Push total number into array
  document.getElementById("congrats").textContent =
    "Congrats, you read " + totalNumber + "  pages today!";//display message
  document.getElementById("rightpane").textContent = myArray;//push array into HTML

  displayArray();//Call display array

};

//Function to display myARRAY broken down to a new line
const displayArray = ()=> {
  let displayedNumbers='';
  for (i = 0; i < myArray.length; i++){

       displayedNumbers += myArray[i] + "\n";
  };  
  document.getElementById("rightpane").textContent = displayedNumbers;//Append myArray into HTML
}

最佳答案

在任何小于 10 的数字前附加一个前缀 0

关于javascript - 如何在 HTML 中显示数组以便将数字分成新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58225577/

相关文章:

javascript - 无法使用 TwitterHelper 在 Twitter 上发布状态消息

javascript - JQuery Mobile 错误

javascript - 值转换为字符串失败

javascript - Bootstrap 导航中的目标 'toggle' 链接

javascript - 在category.ftl中动态设置值

javascript - 向 JavaScript 日历添加功能?

javascript - Reactjs 动态表单获取错误 OnChange 输入值?

javascript - 在常量前加上 char ('+' )

javascript - 如何用JS选择某个类型的下一个兄弟?

java - 如何将java项目导入eclipse在tomcat服务器上运行