getelementbyid doesn't find button id

Question

So I've just started learning javascript and wanted to make a simple input form and a response form on my webbpage. The problem I had is that if I used a simple submit button then the page would refresh and clear both textfields before I could read the response in the response textfield. So I tried making a button that does nothing and then calling it through javascript onClick but it doesn't seem to work.

console.log("simplejava loaded correctly");
console.log(document.getElementById("button1"));
console.log(document.getElementById("fname"));
document.getElementById("button1").onclick = myFunction();
function myFunction() {
    let name = document.getElementById("fname").value;
    document.getElementById("response").value = "Hi " + name;
    if(name == "John")
    {
        alert("Hello "+name)
    }
    
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="simplejava.js"></script>
    <title>Document</title>
</head>

<body>
    <h1>Simple Forms</h1>
    <form>
        <input type="text" id="fname">
        <button type="button" id="button1">Send</button>
        <br>
        <input type="text" id="response">
    </form>
</body>

</html>

*the page would refresh* - that's because your button was in the form and it's type was `submit`, you should change it to `button` — Konrad, Oct 03 '22 at 12:28
Please note that you must pass a function reference to the `onlick` property. You are calling the function instead of passing a reference. — connexo, Oct 03 '22 at 13:41

score 0 · Answer 1 · answered Oct 03 '22 at 12:34

You can just add the onclick event to the button at the html, works fine.

console.log("simplejava loaded correctly");
console.log(document.getElementById("button1"));
console.log(document.getElementById("fname"));
function myFunction() {
    console.log("Button working")
    let name = document.getElementById("fname").value;
    document.getElementById("response").value = "Hi " + name;
    if(name == "John")
    {
        alert("Hello "+name)
    }
    
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="simplejava.js"></script>
    <title>Document</title>
</head>

<body>
    <h1>Simple Forms</h1>
    <form>
        <input type="text" id="fname">
        <button type="button" id="button1" onclick="myFunction()">Send</button>
        <br>
        <input type="text" id="response">
    </form>
</body>

</html>

score -1 · Answer 2 · answered Oct 03 '22 at 12:30

Use addEventListener instead.

console.log("simplejava loaded correctly");
console.log(document.getElementById("button1"));
console.log(document.getElementById("fname"));
// document.getElementById("button1").onclick = myFunction();
document.getElementById("button1").addEventListener('click', () => myFunction());

function myFunction() {
  let name = document.getElementById("fname").value;
  document.getElementById("response").value = "Hi " + name;
  if (name == "John") {
    alert("Hello " + name)
  }

}

<h1>Simple Forms</h1>
<form>
  <input type="text" id="fname">
  <button type="button" id="button1">Send</button>
  <br>
  <input type="text" id="response">
</form>

getelementbyid doesn't find button id

2 Answers2