Javascript not being executed when called from HTML

Question

I'm trying to make a simple HTML file with a checkbox and a javascript that change the color of the checkbox when clicked. The problem is that the javascript file is not called, so clicking the button is useless as the javascript code is not being read. It seens very simple but I can't see what am I doing wrong:

HTML code:

    <!DOCTYPE html>
<html>
<head>
<script src="and_gate.js" defer></script>
</head>
<body style= "background-color: white;">

  <label id=in1 class="container1" onclick="in1(element1)">0
    <input type="checkbox">
  </label>
  <style>
    .container1 {
      background-color:green;
      font-size: 2vw;
    }
    </style>

  </body>
  </html>

Javascript code:

alert('clicked')
funtion in1(element1){
  element1.style="background-color:red;"
}

1. You aren't setting `element1`. 2. Your `alert()` is not inside the `in1` function. — Dai, Sep 17 '20 at 22:44
You are also not passing in an `element1` on your method call — Taplar, Sep 17 '20 at 22:44
I updated the code. I forgot about element1, and I moved the — fernando, Sep 17 '20 at 22:53
You should separate your CSS and JavaScript from your HTML, as a best practice. Just a comment. — StackSlave, Sep 17 '20 at 22:58
Well, what are you passing as `element1`? You could also try attaching your event handler using JavaScript instead of using inline attributes (i.e., `document.getElementById("in1").addEventListener("click", function() { in1(whateverElement1Is); });` — Heretic Monkey, Sep 17 '20 at 23:00

score 3 · Accepted Answer · answered Sep 17 '20 at 23:08

3

In an inline event handler, you can use this to refer to the target of the event.

You also misspelled function. And the alert needs to be inside the function.

function in1_fun(element1) {
  alert('clicked')
  element1.style = "background-color:red;"
}

.container1 {
  background-color: green;
  font-size: 2vw;
}

<label id=in1 class="container1" onclick="in1_fun(this)">0
    <input type="checkbox">
</label>

It's also not a good idea to use the same name for your function as the ID of the element. Both of these become global variables, and it's possible for the ID variable to replace the function variable.

answered Sep 17 '20 at 23:08

Barmar

741,623
53
500
612

IIRC, element `id=""` attributes become properties on the `document` object and not the `window` object; and only `window` object properties are "global" (so it would be `document.in1`, not `window.in1` (or `in1` in the root scope)) - but yes, it would still cause confusion. – Dai Sep 17 '20 at 23:21
No, they become `window` properties. See https://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable – Barmar Sep 17 '20 at 23:22

zcoop98 · Answer 2 · 2020-09-17T23:12:12.400

In JavaScript and HTML, when you pass a JS function to the onclick property of an element, the function doesn't know about the element that's calling it. You need to pass it some way to find that element, like an id (or the outer context through this, which I missed, and as Barmar points out in his excellent answer).

You can then use this ID with a function like document.getElementById() to find the desired element in the DOM, and do something with it, in this case change it's style property.

You also misspelled function as "funtion", which will cause it not to be processed as a function.

function in1(id) {
  document.getElementById(id).style = "background-color:red;"
}

<!DOCTYPE html>
<html>

<head>
  <script src="and_gate.js" defer></script>
</head>

<body style="background-color: white;">

  <label id=in1 class="container1" onclick="in1('in1')">0
    <input type="checkbox">
  </label>
  <style>
    .container1 {
      background-color: green;
      font-size: 2vw;
    }
  </style>

</body>

</html>

Javascript not being executed when called from HTML

2 Answers2