javascript - 如何让 div 充当控制台？

Question

想问一下如何让div充当控制台。例如代码:

  buyBank: function(){
          if(this.cash>(1+this.banks)*10){
            this.cash -= (1+this.banks)*10;
            this.banks++;
            amount3.innerHTML = this.banks;
            price3.innerHTML = "$"+(1+this.banks)*10;
            logger.innerHTML = "Bank nupirktas!";
        }else{
            console.log("Nepakanka pinigu bankui!");
        }
    }

buy3btn.addEventListener("click", function(){
    game.buyBank();
});

id 现在做什么，如果 statement = true，它将“Bank nupirktas”写入 div(记录器)。然而，在第二次点击时没有任何变化(可能发布到同一行)。我希望它打破行并在每次点击时发布一个新的(同时保留旧的)。

Answer 1

那是因为你覆盖了之前的内容。

var div = document.querySelector('div');
div.innerHTML = 'You will never see me';
div.innerHTML = 'Because I overwrite it';

<div></div>

相反，您需要向其附加内容。

function log(msg) {
  var div = document.querySelector('div');
  div.innerHTML += msg + '<br />'; // Add a line break
}

log('First line.');
log('Second line.');
log('Third line.');

<div></div>