HTML, Javascript: button doesn't call function

Question

I make a button in HTML, and I want it to call function in javascript:

index.html

<body onLoad="setGameAreaBounds()" onResize="setGameAreaBounds()">
        <div id="scoreLabel">Score: 0 </div>

        <!--div Group-->
        <div>
            <p id="pageTitle">Button Chaser</p>
            <input type="button" id="startButton" onClick="start()" value="Start"/>
        </div>

        <!--The following: gameArea and dot is grouped together-->
        <div id="gameArea">
            <button id="dot" onClick="detectHit()"></button>
        </div>

</body>

buttonChaser.js

function detectHit() {
    //Increase the var score
}

function setGameAreaBounds() {
    //Setting the size of GameBoard/Window
}



function moveDot() {
    //randomly move the button(id: dot) within the GameBoard/window
}

function start() {
    alert("sometext");
        moveDot();
}

The code runs fine if I put moveDot(); function inside setGameAreaBounds();

However, it seems like the button(id: startButton) never connects to function start();

What did I do wrong?

I use Firefox>Developer>Web Console. when I click start, it said: TypeError: start is not a function Then below it: onClick() index.html:1 Is it enough information? — user2789240
– user2789240, Commented Apr 3, 2016 at 17:48

chriskelly · Accepted Answer · 2016-04-03 18:09:24Z

1

Try moving your functions inside your onLoad function and link them back up to the global scope:

var score = 0;
var aWidth;
var aHeight;
var timer;

var that = this;

function setGameAreaBounds() {
    //Setting the size of GameBoard/Window

  that.moveDot = function () {
      //randomly move the button(id: dot) within the GameBoard/window
  }  

  that.detectHit = function() {
      //Increase the var score
  }

  that.start = _start; // link desired name to reference to existing function

}

function() _start {
    alert("sometext");
    moveDot();
}

Basically, your html functions are accessing functions defined in the global scope after the dom elements were created. So no reference to the function exists when the dom is created. The setGameAreaBounds function gets called after the dom is ready - onLoad. JavaScript functions each have their own scope so you need to pass this from the parent using an unique reference. Then you can assign the names you want to the functions.

A better approach would be to define all scripts after Many programs use an onReady function that waits until the dom is loaded before defining any javascript functions. This is a good approach.

edited Apr 3, 2016 at 18:09

answered Apr 3, 2016 at 17:47

chriskelly

7,7363 gold badges36 silver badges52 bronze badges

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

4 Comments

Matt C Over a year ago

The question poster will benefit from learning what they did wrong and how this fixes their problem.

chriskelly Over a year ago

Thanks @MatthewCliatt but many people, including myself, post and answer and spend a few minutes improving it.

Matt C Over a year ago

Good point. I'll wait longer next time before suggesting an edit.

user2789240 Over a year ago

Thank you! I still don't understand why setGameAreaBoards() can call moveDot() but not start(). Is it because they are called in HTML with onLoad and onResize?

Collectives™ on Stack Overflow

HTML, Javascript: button doesn't call function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related