Why does the innerHTML change immediately revert when executed?

Question

I'm a beginner working on a time conversion app. Currently, the application takes the value entered into the form and then changes the h2 element with the ID "convDate" to the entered value * 2 and then displays the result in the h2 element.

The application does run successfully, but the value immediately disappears from the screen. The changes do stick if I hold CTRL while clicking the button, while also opening the same page in a new tab. I've tried with both Brave and Firefox.

Can somebody explain the logic as to why this is happening? Any information is appreciated. Though, please note that I'm not looking for somebody to finish the app. I'm trying to understand concepts.

Thanks!

<h1>64 Bit Unix Time Converter</h1>
<form>
  <input id='unixTime' type='text'>
  <button class='button' onclick='convert()'>Convert</button>
  <h3>Value: </h3>
  <h2 id='convDate'></h2>
</form>

<script>
  function convert() {
    var entValue = document.getElementById('unixTime').value;
    var conValue = document.getElementById('convDate').value;
    document.getElementById("convDate").innerHTML = (entValue * 2);
  };
</script>

(this isn't the issue, but still one that needs addressing) - The heading `conValue` doesn't have a property `.value`, since it's a heading not an input. — evolutionxbox, Jul 19 '22 at 16:00
Small note, but if you need to just set a text value, don't use innerHTML, use textContent instead. Also, you probably want to start putting your JS "in JS" so in its own file, with the event handling added on the JS side, not using the long-deprecated on... attributes on the HTML side. — Mike 'Pomax' Kamermans, Jul 19 '22 at 16:01

score 2 · Answer 1 · answered Jul 19 '22 at 16:02

The problem is your button. When a button is added within a form, it will always submit the form by default.

There are a few ways to solve this:

Simply adding type="button" to your button will stop it.

Not using the form tag since you aren't submitting anything will also solve it.

score 1 · Accepted Answer · answered Jul 19 '22 at 16:02

You are using a form which submits the page. Since you are running a function and not technically submitting anything, you can make it a div and stay on the same page.

<h1>64 Bit Unix Time Converter</h1>
<div>
  <input id='unixTime' type='text'>
  <button class='button' onclick='convert()'>Convert</button>
  <h3>Value: </h3>
  <h2 id='convDate'></h2>
</div>

<script>
  function convert() {
    var entValue = document.getElementById('unixTime').value;
    var conValue = document.getElementById('convDate').value;
    document.getElementById("convDate").innerHTML = (entValue * 2);
  };
</script>

Thanks! I'll mark this as answered. I'm too new to upvote but will note to return once I'm able to give some kudos. Much appreciated. — Ken, Jul 19 '22 at 16:05

iseiaki · Answer 3 · 2022-07-19T16:10:10.747

it happens because html code is inside the <form> tag. after submitting, code is looking for a link to go to. this problem will be solved if you wrap it inside <div> element instead of <form> like this

   <h1>64 Bit Unix Time Converter</h1>
        <div>
            <input id='unixTime' type='text'>
            <button class='button' onclick='convert()'>Convert</button>
            <h3>Value: </h3> <h2 id='convDate'></h2>
        </div> 
    
        <script>
        
        function convert(){ 
            var entValue = document.getElementById('unixTime').value; 
            var conValue = document.getElementById('convDate').value;
            document.getElementById("convDate").innerHTML = (entValue * 2);
            };
            
        </script>

this works perfectly fine

Why does the innerHTML change immediately revert when executed?

3 Answers3