事件发生时连续换行

时间:2018-07-21 20:21:08

标签: javascript html

每次尝试使用javascript单击按钮时,我都试图在新行中显示一个新数字,但是我不知道该怎么做。我的代码:

var x = 1;

function tri() {
  var u = x++;
  document.getElementById('d1').innerHTML = x + "<br/>" + u;

};
<div class="new_div">
  <div class="div1">
    <button onclick="tri()">click me first</button>
    <article class="art1">
      <h3>Bible</h3>
      <br>
      <br>
      <h3>Info</h3>
      <p id="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in </p>

如您所见,我正在递增x的值,并且试图显示该结果以及x的先前值,因此,当我单击按钮时,我希望代码看起来像这样:

1
   2
   3
   4
   等等...每个数字都换行。

,而不是:     对于值(1),该值在单击按钮时变为2,在再次单击按钮时变为3。     ;值(2)在单击按钮时变为3,在再次单击按钮时变为4 ...

2 个答案:

答案 0 :(得分:0)

尝试一下

var x = 1;
function tri() {
if(x==1)
{
document.getElementById('d1').innerHTML="";
}
document.getElementById('d1').innerHTML += x++ + "<br>";
};

答案 1 :(得分:-1)

如果要获取所有预览结果,请尝试以下操作:-

function tri(){
    var result = "1";
    for(var i=2; i<=x; i++)
        result += "<br/>" + i.toString();
    document.getElementById('d1').innerHTML= result;
    x++;
};