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')
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> 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:
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" class="button" value="SEND" onclick="A2(265.986)">
</body>
</html>