How to use a function in JavaScript?

Question

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')

try var m = document.querySelector("#Math"); (note the # which refer to an id) — RenaudC5
– RenaudC5, Commented Feb 23, 2022 at 8:16
Your queryselector is missing a "#" infront of "Math" and therefore returning undefined. Adding a hashtag should do the trick. You should have a selector like "#Math". — Palladium02
– Palladium02, Commented Feb 23, 2022 at 8:17
If you cannot change the Javascript, there's no way to make it work using whatever HTML you come up with. — connexo
– connexo, Commented Feb 23, 2022 at 8:23
Additionally, even if the selector will be fixed, the line m.addEventListener("click", A2(arr)); won't work, nothing will happen when m is clicked, since A2 doesn't return a function. — Teemu
– Teemu, Commented Feb 23, 2022 at 8:31
Go back to whomever told you it was correct and tell them you've found a few errors. It is possible to add a Math element <Math ...></Math> to your HTML but this is unlikely and not expected. — phuzi
– phuzi, Commented Feb 23, 2022 at 8:35

J.Doable · Accepted Answer · 2022-02-23 08:23:08Z

3

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>

answered Feb 23, 2022 at 8:23

J.Doable

1367 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Teemu Over a year ago

Nothing happens when you click "Set Text In Here :" text.

phuzi Over a year ago

This seems to work for me. @Teemu perhaps Firefox's issue with "Math" goes beyond element names!

Teemu Over a year ago

@phuzi Maybe you've misunderstood my comment, I meant that the event listener attached inside the function doesn't work.

score 0 · Accepted Answer · 2022-02-23 08:33:52Z

0

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" class="button" value="SEND" onclick="A2(265.986)">

</body>
</html>

edited Feb 23, 2022 at 8:33

answered Feb 23, 2022 at 8:32

user10091872

4 Comments

Teemu Over a year ago

Nothing happens when you click "Button is pressed:" text.

user10091872 Over a year ago

@Teemu, sorry, does the question cover that as well?

Teemu Over a year ago

There's no question in the post, but in general you should fix all the errors if you're going to answer.

user10091872 Over a year ago

@Teemu, you're totally right! Unless he edits the question, I'm just removing that part of the code.

Collectives™ on Stack Overflow

How to use a function in JavaScript?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related