javascript - 覆盖段落button.onclick()

Question

按下按钮时如何防止这种情况发生？

我不想在上面的其他输出下方打印，而是希望它替换已经存在的内容。

第一次点击:

第二次点击:

代码:

var sq = "";
var outSquare       = document.getElementById("outSquare");
var inSquare        = document.getElementById("inSquare");
var bSquare         = document.getElementById("bSquare");


bSquare.onclick = function () {
    var g = inSquare.value;
    outSquare.innerHTML = square(g);
}

function square(a) {
    for (var i = 1; i <= a; i++ ) {
        
        for (var j = 1; j <= a; j++) {
            sq += "*";
        }
        
    sq += "<br>";
    }
    return sq;
}

<p id="outSquare"></p>
    <input id="inSquare" type="number"/>
    <button id="bSquare" type="button"> Print </button>

Answer 1

你也需要在函数内部初始化sq:

var sq = "";
var outSquare       = document.getElementById("outSquare");
var inSquare        = document.getElementById("inSquare");
var bSquare         = document.getElementById("bSquare");


bSquare.onclick = function () {
    var g = inSquare.value;
    outSquare.innerHTML = square(g);
}

function square(a) {

    sq = ""; // empty this string on click

    for (var i = 1; i <= a; i++ ) {
        
        for (var j = 1; j <= a; j++) {
            sq += "*";
        }
        
    sq += "<br>";
    }
    return sq;
}

<p id="outSquare"></p>
    <input id="inSquare" type="number"/>
    <button id="bSquare" type="button"> Print </button>