Function in external file doesn't run when button is pressed despite being bound in onclick in HTML/JS

Question

When I run this, it doesn't run the function when I click the button, however it is run once when the website is loaded/reloaded even though (as far as I can tell) the code doesn't do that at any point. I am using the DuckDuckGo browser. I don't have much experience in HTML or JS. This is just for personal use, and doesn't need to be supported on anything except DuckDuckGo.

Here is the HTML (filepath is index.html):

<html lang="en">
    <link rel="stylesheet" href="CSS/index.css">
    
    <body>
        <script src="Scripts/scrambleGen.js"></script>
        <div>
            <p id="scramble"></p>
            <button id="nextScramble">Next</button>
            <script>
                document.getElementById("nextScramble").addEventListener("click", scrambleGen(document.getElementById("scramble")));
            </script>
        </div>

        <div>
            <p id="timeInput"></p>
        </div>
    </body>
</html>

Here is the JS (filepath is "Scripts/scrambleGen.js"):

function scrambleGen(textBox)
{
  scramble = "";
  const moves = ["R","R2","R3","L","L2","L3","U","U2","U3","D","D2","D3","F","F2","F3","B","B2","B3"];
  lastMove = "";
  for (let i = 0; i < 30; i++)
  {
    move = moves[randomInt(0,17)]
    if (lastMove.substring(0,1) == move.substring(0,1))
    {
      move = move.substring(0,1) + (parseInt(move.substring(1), 10) + parseInt(lastMove.substring(1), 10)).toString();
    }
    else
    {
      if (lastMove[1] != undefined) 
      {
        if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 1)
        {
          scramble += lastMove.substring(0,1);
          scramble += " ";
        }
        else if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 2)
        {
          scramble += lastMove.substring(0,1) + "2";
          scramble += " ";
        }
        else if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 3)
        {
          scramble += lastMove.substring(0,1) + "'";
          scramble += " ";
        }
      }
      else 
      { 
        scramble += lastMove; 
        scramble += " "; 
      }
    }
    lastMove = move;
  }
  textBox.innerText = scramble;
}
function randomInt(min, max) 
{
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

Solt · Accepted Answer · 2025-07-04 04:12:21Z

2

There are a lot of ways to solve it. Some you can see in comments and another answers.
I'll show alternatives with no loosing event object (maybe you will need it in another functions)

1. Create global var textbox in html or get it inside function:

 <script>
  var textbox=document.getElementById("scramble") //Or inside function
  document.getElementById("nextScramble").addEventListener("click", scrambleGen);
</script>

Now it is accessible in your script:

function scrambleGen(event){
  //If you didn't create global var, get it here
  //var textbox=document.getElementById("scramble")
  console.log(event,textbox)
  //........
}

2.Binding context

 <script>
  document.getElementById("nextScramble").addEventListener("click", 
    scrambleGen.bind(document.getElementById("scramble"))
  );
  //bind will change "this" in your function to whatever you put above
</script>

Your script:

function scrambleGen(event){
  //'this' now is your textbox:
  console.log(event,this)
  //........
  this.innerHTML='your text here'
}

In both cases you have access to your variable and to event coming from event handler. Sometimes it is very helpful.

answered Jul 4 at 4:12

Solt

1,5013 silver badges17 bronze badges

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

4 Comments

0stone0 Jul 4 at 7:59

Did you write this answer with the help of AI ?

Solt Jul 4 at 8:10

I have enough experience to use my own head.

0stone0 Jul 4 at 8:12

I'm not asking about your experience or you own head, just that your answer is formatted the same way most of the AI's do. Also "There are a lot of ways to solve it" is very Ai'y

Solt Jul 4 at 8:15

AI learns from people, but not vice versa

yoduh · Accepted Answer · 2025-07-04 00:38:18Z

1

The root cause of your issue is how you use addEventListener. Second parameter should be a function reference, whereas you're instead calling the function immediately. The correct script code would be this:

document
  .getElementById("nextScramble")
  .addEventListener("click", function () {
    scrambleGen(document.getElementById("scramble"));
  });

answered Jul 4 at 0:38

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Comments

zer0 · Accepted Answer · 2025-07-04 00:07:28Z

0

Turns out if you use:

<input type="button" onclick="function(parameters)">

instead of a button tag then it works.

answered Jul 4 at 0:07

zer0

135 bronze badges

1 Comment

yoduh Jul 4 at 0:39

onclick can also be used with button, the actual issue in the original code was how you used addEventListener. I've added an additional answer explaining it further.

Collectives™ on Stack Overflow

Function in external file doesn't run when button is pressed despite being bound in onclick in HTML/JS

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related