Question

I have an index webpage that has a submit button on it. When I click that button, I want to run a function that adds a string to a div (using onclick()). However, it only flashes and then disappears. But when I use window.onload, it stays on the page, as I intend. Here’s the code:

<div>
  <form>
    <input type="submit" onclick="test();" value="Add Text">
  </form>
  <div id="holder"></div>
</div>

I include the following in my page with a “script” tag.

WHen I use this, it stays on the page (as it should):

window.onload = function(){
  $('#holder').html("Hello <b>world</b>!");
}

But this disappears right after it loads:

function test(){
  $('#holder').html("Hello <b>world</b>!");
}

Thanks!

Answer 1

The button you are using is a form submit button, which will submit the form and reload the page.

Instead use a <button> button

Use

<button onclick="test();">Add Text</button>

instead of

  <form>
    <input type="submit" onclick="test();" value="Add Text">
  </form>