Dynamic HTML element in JS not persisting

1

I am having issues where I am creating an HTML element in Javascript and appending it to an element in the DOM. I am seeing the element on the page very briefly. Once the page loads the element disappears. Could I get help on where I need to go in debugging this issue?

I have also tried creating a separate function that handles updating and creating the element that gets added to the output element, and calling that function from the event listener. Both methods end with the same result where the element will get created and briefly flashes on the page but disappears once element is finished loading.

const button = document.getElementById('convert-btn');
const number = document.getElementById('number');
const output = document.getElementById('output');

button.addEventListener('click', (e) => {

    if(number.value === ''){
        let result = document.createElement('p');
        let node = document.createTextNode('Please enter a valid number');
        result.appendChild(node);
        output.appendChild(result);
       
    }
});

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Jakes Roman Numeral Converter</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
   
</head>
<body>
    <h2>Jake's Roman Numberal Converter</h2>
    <form id="form">
        <fieldset id="form">
            <h3 id="form-title">Enter Number:</h3>
            <input type="number" id="number">
            <button id="convert-btn">convert</button>
        </fieldset>
    </form>     
    <div id="output"></div>
    <script src='script.js'></script>
</body>
</html>
2

Try calling the event.preventDefault function to stop the page from reloading on the button click.

Example code:

document.getElementById("myb").addEventListener("click", function(event){
  event.preventDefault()
});
3

Wow!! that worked. Thanks @hbar1st. I want to ask since I am not sure I fully understand what is going on here. Does a on “click” event always by default reload the page, and thats why I wasn’t seeing my element appear on the page?

So calling preventDefault() stops this from occurring? Any change you have any references that documents best practices around eventListeners? When using a click event should I always call preventDefault()?

4

because your button element is not defined as type=“button” it will be assumed by the browser that this button is a “submit” type of button. A submit button will always try to ‘submit’ the contents of the associated form and this causes the refresh.