How can I call function in HTML file for checkbox?

Question

As a default, the checkbox is already checked but the tables are not hidden. As a default, the first two table shall be demonstrated. When you click on a few times, you can see hidden tables but they should be hidden as default checked. The problem is when I copy paste in https://codepen.io/ which is working because js directly calling the function. When you copy paste this code inside a html file, it is not working. How can I call function to get the result?

<html>

<head>
    <script language="JavaScript">
        function showMe(cls) {
            var chboxs = document.getElementsByName("c1");
            var vis = 0;
            for (var i = 0; i < chboxs.length; i++) {
                if (chboxs[i].checked) {
                    vis = 1;
                    break;
                }
            }
            var elements = document.getElementsByClassName(cls);
            for (let e of elements) {
                if (vis === 1) {
                    e.style.display = 'none';
                } else {
                    e.style.display = 'table';
                }

            }
        }
        show('box');
    </script>

</head>

<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left">
            <input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
        </td>
    </tr>
</table>

<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tr>
        <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
        <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
                <p style="margin: 0pt; ">Test </p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>
</table>

</html>

Does this answer your question? why is simple javascript code not running? — Heretic Monkey
– Heretic Monkey, Commented Jun 30, 2020 at 15:10

tstrand66 · Accepted Answer · 2020-06-30 15:17:26Z

I broke your js out into a separate file for ease of reading. Then i made the following tweaks:

add an id to your checkbox. this eliminates the need to check your element in a loop when there is only 1 of them and since its a checkbox there should always only be 1 with that name
pull the tables in by class name as you were and then convert the node collection to an array. then leverage the array builtin forEach loop.
lastly use a ternary if statement to set your table display for some syntactic sugar.

function showMe(cls) {
    const checkbox = document.getElementById("c1"),
      tables = Array.prototype.slice.call(document.getElementsByClassName(cls));
    tables.forEach(function (t) {
        t.style.display = checkbox.checked ? 'table' : 'none';
    });
}

<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left">
            <input type="checkbox" name="c1" id="c1" checked="true" onclick="showMe('box')">Show Result
        </td>
    </tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tr>
        <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
        <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    <tr>
        <td class="uniqueborder" align="left">
            <p style="margin: 0pt; ">Test </p>
        </td>
        <td class="uniqueborder" align="center" width="10%">
            <font color="gray">N/A</font>
        </td>
    </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
                <p style="margin: 0pt; ">Test </p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
    </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>
        <tr>
            <td class="uniqueborder" align="left">
                <p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
            </td>
            <td class="uniqueborder" align="center" width="10%">
                <font color="gray">N/A</font>
            </td>
        </tr>

    </tbody>
</table>

Maciej Trzciński · Accepted Answer · 2020-06-30 15:03:14Z

Add the JS at the end of file, this is doesn't work, because you return the JS before HTML. You need render HTML before JS, and change show('box'); to showME('box');

<html>

  <head></head>

  <br>
  <table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td align="left">
        <input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
        </td>
    </tr>
  </table>

  <table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
    <tr>
      <td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3">
        <b>Event</b>
      </td>
      <td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3">
        <b>Status</b>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">Test </p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">Test </p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
        <p style="margin: 0pt; ">Test </p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
  </tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Test input:</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>
    <tr>
      <td class="uniqueborder" align="left">
        <p style="margin: 0pt; ">
          <span class="bluebold">1. Expected</span></p>
      </td>
      <td class="uniqueborder" align="center" width="10%">
        <font color="gray">N/A</font>
      </td>
    </tr>

  </tbody>
</table>
</table>
<script language="JavaScript">
function showMe(cls) {
  var chboxs = document.getElementsByName("c1");
  var vis = 0;
  for (var i = 0; i < chboxs.length; i++) {
    if (chboxs[i].checked) {
      vis = 1;
      break;
    }
  }
  var elements = document.getElementsByClassName(cls);
  for (let e of elements) {
    if (vis === 1) {
      e.style.display = 'none';
    } else {
      e.style.display = 'table';
    }

  }
}
showMe('box');
</script>
</html>

Tobias Rohde · Accepted Answer · 2020-06-30 15:32:47Z

First you try to call the function show('box'); which does not exist. You should rename the call to showMe('box');

The second problem is the order of execution. Basically everything that is loaded is executed immediately. In your case, the first thing that is defined is the function showMe(). After that it is called immediately (see above). The problem that occurs now is that the HTML element that the function is supposed to access has not yet been rendered.

So the initial call of the function showMe('box') should be done after the HTML elements are rendered. You can do this by making the call at the end of the page in separate script tags or in the body tag in the onload method.

    <body onload="showResults('box')">
    ...
    </body>

Basically, you should use meaningful variable and function names (for example, "resultVisible" instead of "vis" or "showResults" instead of "showMe") and use them with the correct type, e.g. Boolean (true / false).

I would add an ID to the checkbox instead of a name. Since you only have one of them, you can save yourself a lot of scripting to determine whether the checkbox is set or not. You can also shorten the part where you control the visibility.

   function showResults(cls) {
      var checked = document.getElementById('c1').checked;

      var elements = document.getElementsByClassName(cls);
      for (let e of elements) {
          e.style.display = (checked) ? 'table' : 'none';
      }
   }

Collectives™ on Stack Overflow

How can I call function in HTML file for checkbox?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related