Question

I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).

JavaScript code: (it’s the only method in the js file)

function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....

Where I’m calling it in the html:

<input type="submit" id="post-button" value="Post" onclick="post()">

The script tag is in the header of the html page.

How do I get it to stay on the page past the duration of the click? Any ideas why it’s being immediately obliterated?

Answer 1

You still need to cancel the form’s submission. A return false; from post, if it exists, won’t work because the onclick attribute is calling post() but not returning anything.

You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):

document.getElementById('some-form').onclick = post;