A puzzlement about TagName

jimandy · Thursday at 9:25 PM

Shouldn't this work? The alert should fire when a box is clicked but it doesn't

Code:

<script>
function go(){
    foo=getElementsByTagName('input')
    alert('the function worked')
}
</script>

    <!---HTML--->
check this-> <input type='checkbox' onchange="go()">
or this-> <input type='checkbox' onchange="go()">

VBService · Friday at 2:42 AM

Check this out:

HTML:

<script>
  function go(element) {
    alert(
      'You clicked on the checkbox:\n' +
      `name: ${element.name}\n` +
      `value: ${element.value}`
    );
  }
</script>

<label>check this-> <input type="checkbox" name="checkbox_1" onchange="go(this)" value="lorem_1"></label>
<label>or this->    <input type="checkbox" name="checkbox_2" onchange="go(this)" value="lorem_2"></label>

or

HTML:

<script>
  function go(e) {
    alert(
      'You clicked on the checkbox:\n' +
      `name: ${e.target.name}\n` +
      `value: ${e.target.value}`
    );
  }
</script>

<label>check this-> <input type="checkbox" name="checkbox_1" onchange="go(event)" value="lorem_1"></label>
<label>or this->    <input type="checkbox" name="checkbox_2" onchange="go(event)" value="lorem_2"></label>

or

HTML:

<script>
  function go(e) {
    if (e.target.matches('input[type="checkbox"]')) {
      alert(
        'You clicked on the checkbox:\n' +
        `name: ${e.target.name}\n` +
        `value: ${e.target.value}\n` +
        `is checked: ${e.target.checked.toString()}`
      );
    }
  }
</script>

<div onclick="go(event)">
  <label>check this &#8680; <input type="checkbox" name="checkbox_1" value="lorem_1"></label>
  <label>or this &#8680;    <input type="checkbox" name="checkbox_2" value="lorem_2"></label>
</div>

[ HTML symbol codes and entities ]

Saul H. · Friday at 3:20 PM

You have made a few syntactical errors.
-Remember to close particular sections of the script with semicolons (script was necessary in this case).
-You are using the keyword "onchange". This keyword executes a designated function when some attribute is changed. The "onclick" keyword or the "addEventListener" keyword would be more appropriate for firing an alert when a box is clicked.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Alert Execution Using "onclick" Keyword</title>
    </head>
    <body>
        <input type="button" value="Click me!" onclick="alert('The function worked!');"/>
    </body>
</html>

P.S. For this code snippet, document.getElementsByTagName was not needed, but if you would like some primer on it it is a variation of the generic querySelector() method. The attribute this method is getting is "TagName".

Hope this was helpful!

VBService · 2025-01-04T03:12:07+0000

Saul H. said:
querySelector() method. The attribute this method is getting is "TagName".

No, "TagName" is not a parameter for querySelector() in the strict sense of the word.

element.querySelector(CSS selectors)

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

jimandy · 2025-01-04T19:33:10+0000

Ah, I just found the problem, my original posted code had

Code:

foo=getElementsByTagName('input')

which should have been...

Code:

foo=document.getElementsByTagName('input')

jimandy · 2025-01-04T19:45:57+0000

jimandy said:
Ah, I just found the problem,

Here's the faulty line

Code:

foo=getElementsByTagName('input')

which should be

Code:

foo=document.getElementsByTagName('input')

Thanks all for the replies. I always learn from them
(and I will use "onclick" instead of "onchange")

Can this be made to work?	5	Sep 8, 2024
Selective check box selector	3	Jul 22, 2024
Can someone pls help me with a little algorithm script	1	Nov 28, 2024
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
How do I push into an array using an event listener?	5	Dec 22, 2022
What do you think about this script?	0	Aug 11, 2023
Help me sort out this script	1	Oct 17, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023

A puzzlement about TagName

jimandy

VBService

Saul H.

VBService

element.querySelector(CSS selectors)

jimandy

jimandy

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads

A puzzlement about TagName

element.querySelector(CSS selectors)​

Ask a Question

Similar Threads

Forum statistics

element.querySelector(CSS selectors)