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

Question

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 onload() {
  /* 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="" onload="onload()">

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


  <!-- dropdown select time window  -->
  <div class="dropdown" id="dropdown" onclick="">
    <!-- dropdown textbox with chosen informations -->
    <input type="text" class="textbox" id="txt" value="" placeholder="     select the test duration" readonly>
    <!-- options for dropdown select -->
    <div class="option">
      <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" class="ck">
    </div>
    <!-- capital letters check -->
    <div>
      <label for="ckB">A</label>
      <input type="checkbox" id="ckB" class="ck">
    </div>
    <!-- numbers check -->
    <div>
      <label for="ck1">1</label>
      <input type="checkbox" id="ck1" class="ck">
    </div>
    <!-- special characters check -->
    <div>
      <label for="ck>">#</label>
      <input type="checkbox" id="ck" class="ck">
    </div>

  </div>


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

  </footer>

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

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

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

  </menu>

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

  <!-- frame for higher resolution screen-->
  <div class="h"> </div>



</body>

Did you check the network tab in dev tools to see if the script loads? — Konrad
– Konrad, Commented Jul 30, 2022 at 14:35
@KonradLinkowski yes script loads correctly and functions that weren't called by onclick work. — Okami
– Okami, Commented Jul 30, 2022 at 14:43

Konrad · Accepted Answer · 2022-07-30 14:44:52Z

1

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

Remove this wrapper.
Add defer attribute to the script

answered Jul 30, 2022 at 14:44

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yudono Putro Utomo · Accepted Answer · 2022-07-30 15:31:57Z

0

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

answered Jul 30, 2022 at 15:31

Yudono Putro Utomo

1626 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related