addEventListener click is immediately disappearing after KeyPress

Question

For some reason I can not get it to work, after clicking enter on the keyboard the new input shows up for less than a millisecond and then disappears

 <!DOCTYPE html>
    <html>
    <head>
        <title>Simple Register Form with JavaScript</title>
    </head>
    <body>
        <form>
            <input type="text" class="regFname" placeholder="First name: ">
            <button>Register</button>
        </form>
        <p>Current Users</p>
        <ul></ul>
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

and here is the JavaScript

var inputFname = document.querySelector(".regFname");
var button = document.querySelector("button");
var ul = document.querySelector("ul");

function inputLength() {
    return inputFname.value.length;
}
function add() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(inputFname.value));
    ul.appendChild(li);
    inputFname.value = "";
}   
function addUserAfterClick() {
    if (inputLength() > 0) {
        add();
    }
}
function addUserAfterKeyPress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        add();
    }
}
button.addEventListener("click", addUserAfterClick);
inputFname.addEventListener("keypress", addUserAfterKeyPress);

score 1 · Answer 1 · answered Nov 03 '18 at 12:11

Just add type="button" in your html. If not specified it behaves as type="submit"

var inputFname = document.querySelector(".regFname");
var button = document.querySelector("button");
var ul = document.querySelector("ul");

function inputLength() {
  return inputFname.value.length;
}

function addUser() {
  if (inputLength() > 0) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(inputFname.value));
    ul.appendChild(li);
    inputFname.value = "";
  }
}
button.addEventListener("click", addUser);

<form>
  <input type="text" class="regFname" placeholder="First name: ">
  <button type="button">Register</button>
</form>
<p>Current Users</p>
<ul></ul>

addEventListener click is immediately disappearing after KeyPress

1 Answers1