• Select a element with a single onclick() function in ?
    From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Mon Jan 22 11:42:00 2024
    From Newsgroup: alt.html

    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ...
    <td id="42">
    ...

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?

    Thanks.

    Janis
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From JJ@jj4public@outlook.com to alt.html on Mon Jan 22 22:27:11 2024
    From Newsgroup: alt.html

    On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ....
    <td id="42">
    ....

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?

    Thanks.

    Janis

    Within that `f()` function, `event` refers to the current (click) event
    object. Its `target` property refers to the clicked element.

    Alternatively, pass the `this` keyword as an argument of the `f()` function call. e.g.

    onclick="f(this)"

    The `f()` function should be declared as e.g.:

    function f(clickedEle) {
    //...
    }
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Mon Jan 22 17:21:01 2024
    From Newsgroup: alt.html

    On 22.01.2024 16:27, JJ wrote:
    On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ....
    <td id="42">
    ....

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?

    Within that `f()` function, `event` refers to the current (click) event object. Its `target` property refers to the clicked element.

    Alternatively, pass the `this` keyword as an argument of the `f()` function call. e.g.

    onclick="f(this)"

    The `f()` function should be declared as e.g.:

    function f(clickedEle) {
    //...
    }


    This is fine. I'll try that in my code. - Thanks!

    Janis

    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Mon Jan 22 19:03:54 2024
    From Newsgroup: alt.html

    On 22.01.2024 17:21, Janis Papanagnou wrote:
    On 22.01.2024 16:27, JJ wrote:
    On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ....
    <td id="42">
    ....

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?

    Within that `f()` function, `event` refers to the current (click) event
    object. Its `target` property refers to the clicked element.

    Alternatively, pass the `this` keyword as an argument of the `f()` function >> call. e.g.

    onclick="f(this)"

    The `f()` function should be declared as e.g.:

    function f(clickedEle) {
    //...
    }


    This is fine. I'll try that in my code. - Thanks!

    I couldn't get it working with my HTML event-handler definition
    <table ... onclick="f()">
    Inside f() the 'event' was undefined, and all I tried with 'this',
    'target', 'document', function parameters, access through elements,
    and whatnot, did not work. :-(
    (And all I found on that topic on the net uses JS event handlers, addEventListener, not the HTML onclick().)


    Installing a JS event handler like this (for example) works:

    function f(ev) { alert(ev.target.closest('img').title); }
    document.addEventListener('click', f);

    I wanted to stay with the onclick="f()" logic, but okay... :-/

    Janis

    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From JJ@jj4public@outlook.com to alt.html on Tue Jan 23 09:33:02 2024
    From Newsgroup: alt.html

    On Mon, 22 Jan 2024 19:03:54 +0100, Janis Papanagnou wrote:
    On 22.01.2024 17:21, Janis Papanagnou wrote:
    On 22.01.2024 16:27, JJ wrote:
    On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ....
    <td id="42">
    ....

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?

    Within that `f()` function, `event` refers to the current (click) event
    object. Its `target` property refers to the clicked element.

    Alternatively, pass the `this` keyword as an argument of the `f()` function >>> call. e.g.

    onclick="f(this)"

    The `f()` function should be declared as e.g.:

    function f(clickedEle) {
    //...
    }


    This is fine. I'll try that in my code. - Thanks!

    I couldn't get it working with my HTML event-handler definition
    <table ... onclick="f()">
    Inside f() the 'event' was undefined, and all I tried with 'this',
    'target', 'document', function parameters, access through elements,
    and whatnot, did not work. :-(
    (And all I found on that topic on the net uses JS event handlers, addEventListener, not the HTML onclick().)

    Installing a JS event handler like this (for example) works:

    function f(ev) { alert(ev.target.closest('img').title); }
    document.addEventListener('click', f);

    I wanted to stay with the onclick="f()" logic, but okay... :-/

    Janis

    If you want `this` in the function to refer to the element, do it like
    below.

    onclick="f.call(this)"

    Odd that the `event` is not available within that function. Unless... a code was executed asyncronously. i.e. executed later after the event has been handled.
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Jonathan N. Little@lws4art@gmail.com to alt.html on Tue Jan 23 08:20:53 2024
    From Newsgroup: alt.html

    Janis Papanagnou wrote:
    With a single onclick() definition on the <table> level

    <table onclick="f()">
    <tr>
    <td id="11">
    ...
    <td id="42">
    ...

    is it possible to get in f() the concrete element that has been
    clicked on, e.g. the one with id="42" (or do I have to provide
    an own onclick() attribute with every single <td> element)?


    I wouldn't use one function on the parent, but rather attached one
    function to each element and self-reference in the function to ID the
    element clicked:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>Attach to Each</title>

    <style>
    td {
    padding: .2em;
    border: 1px solid black;
    width: 2em;
    }
    </style>
    </head>

    <body>
    <table>
    <tr>
    <td id="Sam">Sam</td>
    <td id="Jim">Jim</td>
    <td id="Bob">Bob</td>
    <td id="Pat">Pat</td>
    </tr>
    </table>

    <script>
    function whoAmI(e) {
    alert('I am ' + e.target.id);
    }

    const tds = Array.from(document.querySelectorAll('td'));
    tds.forEach((element) => {
    element.addEventListener('click', whoAmI);
    });
    </script>
    </body>
    </html>
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • Sysop: Amessyroom
    Location: Fayetteville, NC
    Users: 65
    Nodes: 6 (0 / 6)
    Uptime: 02:45:41
    Calls: 862
    Files: 1,311
    D/L today: 10 files
    (20,373K bytes)
    Messages: 264,331