Overwrite paragraph button.onclick()

How can I prevent this from happening when i press the button?

Instead of printing below the other output above, I want it to replace what is already there.

First click:

Second click:

Code:

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>

var sq = "";

square

2 Answers
2

You need to initialise sq inside the function too:

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>

You are missing sq = ''; inside the function square(a). Doing sq="" will re-initialize the value of sq to empty for new iteration and will output the desired behaviour.

sq = '';

square(a)

sq=""

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 = '';
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>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy