can't find variable: function name in external js file-CodePudding

i have a problem with my website. I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them. this is my code

function onl oad() {
  /* leaderboard variable */
  let x = document.getElementById('boardw');
  /* help popup variable*/
  let y = document.getElementById('helpw');
  /* settings popup variable*/
  let z = document.getElementById('setw');
  /* help button variable*/
  let a = document.getElementById('help');
  /* dropdown container variable*/
  let dropdown = document.getElementById('dropdown');
  /* footer popup display none*/
  document.getElementById('card').style = "display: none;";

  /* variable test */
  console.log(x);

  /* show footer popup */
  function showCard() {
    document.getElementById('card').style = "display: block;";
    document.getElementById('footer').style = "display: none;";
  }
  /* hide footer popup */
  function hide() {
    document.getElementById('card').style = "display: none;";
    document.getElementById('footer').style = "display: block;";
  }

  /* choose time in dropdown function */
  function show(anything) {

    document.getElementById('txt').value = anything;
  }

  /* show options in dropdown */
  dropdown.onclick = function() {
    dropdown.classList.toggle('active');
  }
  /* show leaderboard function*/
  function menu1() {

    x.classList.toggle('active');
  }
  /* show help popup function*/
  function menu2() {

    y.classList.toggle('active');
    a.classList.toggle('active');

  }
  /* show settings function*/
  function menu3() {

    z.classList.toggle('active');
  }

  /* hide popups function*/
  function remove() {
    y.classList.remove('active');
    z.classList.remove('active');
    x.classList.remove('active');
    dropdown.classList.remove('active');

  }
}

<body id="bd" style="" onl oad="onload()">

  <script src="script.js" charset="utf-8"></script>


  <!-- dropdown select time window  -->
  <div  id="dropdown" onclick="">
    <!-- dropdown textbox with chosen informations -->
    <input type="text"  id="txt" value="" placeholder="     select the test duration" readonly>
    <!-- options for dropdown select -->
    <div >
      <div onclick="show('   1 minute')">1 minute</div>
      <div onclick="show('   2 minutes')">2 minutes</div>
      <div onclick="show('   3 minutes')">3 minutes</div>
      <div onclick="show('   5 minutes')">5 minutes</div>
      <div onclick="show('   10 minutes')">10 minutes</div>
    </div>
  </div>


  <!-- checkboxes for charset in game -->
  <div id="charset">
    <!-- normal letters check -->
    <div>
      <label for="cka">a</label>
      <input type="checkbox" id="cka" >
    </div>
    <!-- capital letters check -->
    <div>
      <label for="ckB">A</label>
      <input type="checkbox" id="ckB" >
    </div>
    <!-- numbers check -->
    <div>
      <label for="ck1">1</label>
      <input type="checkbox" id="ck1" >
    </div>
    <!-- special characters check -->
    <div>
      <label for="ck>">#</label>
      <input type="checkbox" id="ck" >
    </div>

  </div>


  <!-- about popup -->
  <footer onclick="remove()">
    <!-- show popup btn -->
    <button id="footer" onclick="showCard();" style="">i</button>
    <!-- popup container -->
    <div id="card"  style="">
      <!-- close popup btn -->
      <button id="close" onclick="hide()">x</button>
    </div>

  </footer>

  <!-- menu -->
  <menu>
    <!-- leaderboard popup -->
    <button  id="board" onclick="menu1()">L</button>
    <div id="boardw" style="" >
    </div>

    <!-- help popup -->
    <button  id="help" onclick="menu2()">?</button>
    <div id="helpw" style="" >
    </div>

    <!-- settings pop -->
    <button  id="settings" onclick="menu3()">S</button>
    <div id="setw" style="" >
    </div>

  </menu>

  <!-- start game btn -->
  <div id="gma">
    <a href="#"><button id="start">Start</button></a>
  </div>

  <!-- frame for higher resolution screen-->
  <div > </div>



</body>

CodePudding user response：

You wrapped your functions in function onl oad() { ... } so the inner functions can't be reached from HTML.

Remove this wrapper.
Add defer attribute to the script

CodePudding user response：

put functions and variables outside the onl oad function, or use addEventListener to call listener document.getElementById("cka").addEventListener("click", function(){ ... })