JS: How using the function-CodePudding

I have a function written in javascript. The function is correct, I cannot change it. I need to write HTML code to handle it. Unfortunately, I do not fully understand how it works, when starting the debugger it screams errors:

function A2(params) {
  if ((params / (10 % 4)) === 132.993) {
    var m = document.querySelector("Math");
    console.log("A2 hip hip hura");
    m.innerHTML = "Set Text In Here :";
    var arr = [m];
    arr.push("Element");
    arr.push("Second Element");
    m.addEventListener("click", A2(arr));
  }
}

<div id="Math">
  <input type="text" value="nothing" />
</div>

<input type="submit" value="SEND" onclick="A2(265.986)" />

error: TypeError: Cannot set properties of null (setting 'innerHTML')

CodePudding user response：

you need to use the querySelector according to the right selector which is # in that case

<html>  
<head>  
<script type = "text/javascript">  
function A2(params) {
    if ((params / (10 % 4)) === 132.993) {
        var m = document.querySelector("#Math");
        console.log(m)
        console.log("A2 hip hip hura");
        m.innerHTML = "Set Text In Here :";
        var arr = [m];
        arr.push("Element");
        arr.push("Second Element");
        m.addEventListener("click", A2(arr));
    }
}
</script>  
</head>  
<body>  
<div id="Math">
    <input type="text" value="nothing" />
</div>

<input type="submit" value="SEND" onclick="A2(265.986)"/>
</body>  
</html>

CodePudding user response：

What you forgot is just # sign before Math. Use var m = document.querySelector("#Math"); instead of var m = document.querySelector("Math"); In addition, be sure to read these:

Document.querySelector()

CSS Selector Reference

Here, a little example, just run code snippet:

function A2(params) {
    if ((params / (10 % 4)) === 132.993) {
        var m = document.querySelector("#Math");
        console.log("Responding!");
        m.innerHTML = "Button is pressed:";
    }
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

.button {border-radius: 5px;}

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<div id="Math">
    <input type="text" value="nothing" />
</div>

<input type="submit"  value="SEND" onclick="A2(265.986)">

</body>
</html>