Javascript 如何在HTML中显示数组，以便将数字拆分为新行

我正在尝试用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
}

//用于保存一段时间内每次坐席读取的页数统计信息的数组
常量myArray=[]；
//函数计算读取的页数
让我们计算=（）=>{
var start=document.getElementById（“number1”）.value；
var end=document.getElementById（“number2”）.value；
document.getElementById（“number1”）.value=”“；//将START设置为空
document.getElementById（“number2”）.value=”“；//将END设为空
让totalNumber=结束-开始；
myArray.push（totalNumber）；//将总数推入数组
document.getElementById（“恭喜”）.textContent=
“恭喜，您今天看到了”+totalNumber+“页面！”//显示消息
document.getElementById（“rightpane”）.textContent=myArray；//将数组推入HTML
displayArray（）；//调用显示数组
};
//函数以显示分解为新行的myARRAY
常量displayArray=（）=>{
让DisplayedNumber=''；
对于（i=0；i// Array to hold statistics of number of pages read per sitting  over a period of time
const myArray = []
    , Num_1     = document.getElementById('number1')
    , Num_2     = document.getElementById('number2')
    , congrats  = document.getElementById("congrats")
    , rightpane = document.getElementById("rightpane")

const LeadZeros =(val,lg)=>('0'.repeat(lg)+val).slice(-lg)

// Function to calculate number of pages read
const calculate =_=>
{
  let totalNumber = parseInt(Num_2.value) - parseInt(Num_1.value)

  Num_1.value = '' // make START empty
  Num_2.value = '' // make END empty

  myArray.push( LeadZeros(totalNumber,3) ) // Push total number into array
/*
// or:
myArray.push( totalNumber.toString(10).padStart(3, '0') )
*/

  congrats.textContent  = `Congrats, you read ${totalNumber} pages today!` // display message
  rightpane.textContent = myArray.join("\n")   // push array into HTML
}

}; document.getElementById（“rightpane”）.textContent=displayedNumbers；//将myArray追加到HTML中 }

---

将前缀0附加到任何小于10的数字上

您可以将一个数字附加到列表项的开头，每次增加一个。

我不确定您想做什么，但是，如果您希望数字在新行中显示，而不使用列表和CSS，则可以将其包装在“pre”标记中，并将其拆分为新行，如下所示：

displayArray（）；
函数displayArray（）{
myArray=[0,1,2,3,4]；
让DisplayedNumber=''；
对于（i=0；i// Array to hold statistics of number of pages read per sitting  over a period of time
const myArray = []
    , Num_1     = document.getElementById('number1')
    , Num_2     = document.getElementById('number2')
    , congrats  = document.getElementById("congrats")
    , rightpane = document.getElementById("rightpane")

const LeadZeros =(val,lg)=>('0'.repeat(lg)+val).slice(-lg)

// Function to calculate number of pages read
const calculate =_=>
{
  let totalNumber = parseInt(Num_2.value) - parseInt(Num_1.value)

  Num_1.value = '' // make START empty
  Num_2.value = '' // make END empty

  myArray.push( LeadZeros(totalNumber,3) ) // Push total number into array
/*
// or:
myArray.push( totalNumber.toString(10).padStart(3, '0') )
*/

  congrats.textContent  = `Congrats, you read ${totalNumber} pages today!` // display message
  rightpane.textContent = myArray.join("\n")   // push array into HTML
}

0123

我刚刚对您的代码进行了一些更正

并添加parseInt

您还必须查看

空白：pre

我还删除了函数DisplayArray（），并使用Array.join（）方法。

leadZero功能使用：

leadZero分为两部分：（例如lg=3）

1）'0'。重复（3）+val==='000'+val
如果val=5，则给出“0005”
如果val=42，则给出“00042”

nota:第一个值是字符串，并强制在值字符串中进行设置

2）（）.slice（-lg）slice（-3）
当我们输入负值时，方法string.slice pars是最后一个字符并向上（从这里的3开始）

的最后3个字符：
“0005”。切片（-3）=>005'

---

“00042”。切片（-3）=>'042'

这很奇怪，我刚刚发现数组只在移动宽度上分成一条新的线，但是当我将屏幕扩展到桌面时，我也尝试了
，不可能在这里添加屏幕截图吗？@MisterJojo，请提供一个代码片段，这样我就可以看到你的意思了好主意，让我试试在，但我该如何开始！可能是IF语句？它将与IF语句一起使用，但我相信您至少需要将数据类型交换为字符串以前缀零。我还没有喝咖啡，但如果我弄明白了，我会为您发布。我现在遇到的一个问题是，当数字显示在我的HTML div中时，它们显示为1。我怎样才能摆脱这些，只看到数字呢？谢谢@Mister Jojo，这是一段很棒的代码，但我还是回到了最初的错误，数组结果中的单个数字没有换成新行，换成新行的数字从10开始。如何将零预加为单个整数，使它们看起来像001、002、003等？我想这会解决我的问题：谢谢你带我走到这一步，我将尝试阅读关于如何添加前导零的文章，我相信这是可以努力完成的。@Chris我在我的帖子中添加了有用的评论。别忘了验证我的答案？我如何验证？我在这个平台上还是比较新的，因为我很少使用它.告诉我怎么做，我会做的。