Why does this HTML/JS revert back to the original after changing the inner HTML?

Question

I am starting to learn JavaScript and I was wondering why this doesn't permanently make "Ephemeral" appear before the button and why it reverts back to the original HTML page before the button is pressed?

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="mind.js"></script>
</head>
<body>
    <h1 id = "identifier"></h1>
    <form>
        <button value = "button!" onclick="doSomething()"> </button>
    </form>
</body>
</html>

mind.js

function doSomething() {
    document.getElementById("identifier").innerHTML = '<i>Ephemeral</i>';
}

Answer 1

Because you're submitting the form, which is refreshing the page. Add return false to the inline handler, if you don't want to submit yet.

<button value = "button!" onclick="doSomething(); return false;"> </button>

Or add return before the call, and add return false to the function.

<button value = "button!" onclick="return doSomething();"> </button>

function doSomething() {
    document.getElementById("identifier").innerHTML = '<i>Ephemeral</i>';
    return false;
}

Why does this HTML/JS revert back to the original after changing the inner HTML?

Question

1 answers

solution1
10 ACCPTED 2013-09-07 19:34:35

Why does this HTML/JS revert back to the original after changing the inner HTML?

Question

1 answers

solution1 10 ACCPTED 2013-09-07 19:34:35

solution1
10 ACCPTED 2013-09-07 19:34:35