Garrett Sanderson Garrett Sanderson - 7 months ago 14
Javascript Question

Function running without clicking on 'li'

I am making a basic guessing game and I want the the user to click a number and then have that number the userAnswer and the computerAnswer is a randomly generated number between one and ten.

Anyway, the setVariables() function is running without the user clicking on the li even though I have it set to be on click.

Any help would be awesome!


<!DOCTYPE html>
<html lang="en" class="no-js">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Background Headers | Demo 2</title>
<meta name="description" content="Examples for creative website header animations using Canvas and JavaScript" />
<meta name="keywords" content="header, canvas, animated, creative, inspiration, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="dist/css/app.css">
<link href=',400,800|Clicker+Script' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src=""></script>
<script src=""></script>

<div class="container demo-2">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<div class="row enter-name">
<div class="large-12 columns">
<h1>The Guessing Game</h1>
<p>This is a simple guessing game.</p>
<h5>Please enter your name below</h5>
<input type="text" id="name" value="" placeholder="John Doe">
<input onclick="game.init()" type="submit" id="submit-name">
<div class="row game hide">
<div class="large-12 columns">

<h1 id="display-name" class="text-center"></h1>

<h1 class="text-center">Try to guess the number in less than 5 tries!</h1>

<ul class="numbers-to-guess">
<li value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>

<hr />

<h2 id="user-name"></h2>
<div class="demo2">
<h2>The Computer's Number: <span id="demo1"></span></h2>

<div class="demo3">
<h2>Your Number: <span id="your-number"></span></h2>

<h2>Times Guessed: <span id="guessed"></span></h2>

<hr />

<h1 id='message'></h1>

<h3 class="score">Score: <span id="count"></span></h3>

<div class="large-5 columns answers">

<table class="large-5 text-center columns">
<th>Computer's Answers</th>
<tr id="computer-answers">

<table class="large-5 text-center columns">
<th id="user">User's Answers</th>
<tr id="user-answers">

</div><!-- /container -->
<script src="js/app.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>



// Players
// Goals
// Obstacles
// Scoring System
// UI for game
// Game flow scroing -> points -> etc

game = {
init: function() {
this.timesGuessed = 0;
this.userAnswers = [];
this.computerNumbers = [];

cacheDom: function() {
this.numbers = $('.numbers-to-guess');

setName: function() {

this.userName = $('#name').val();


bindEvents: function() {
this.numbers.find('li').on('click', this.setVariables());

screenTransition: function() {



setVariables: function() {
// Asks for users answer
// this.userAnswer = prompt('Pick a number between 1 and 10');

// Generates a random number between 1 and 10
// this.randNumber = Math.floor(Math.random() * 10 ) + 1;

// Checks the users number vs the random number
this.checkAnswer(userAnswer, this.randNumber);

setNameOnGame: function(userName) {
document.getElementById('user-name').innerHTML = 'Player Name: ' + userName;
document.getElementById('user').innerHTML = userName + ' Answers';
// document.getElementById('display-name').innerHTML = 'Hello ' + userName + '! Please pick a number below.';

checkAnswer: function(userAnswer, randNumber) {

this.render(userAnswer, randNumber, this.timesGuessed);

if (userAnswer > randNumber) {
alert('You Guessed To High, Guess Again...');
document.getElementById('message').innerHTML = "You guessed to high";
// this.setVariables();

} else if (userAnswer < randNumber) {
alert('You Guessed To Low, Guess Again...')
document.getElementById('message').innerHTML = "You guessed too low";
// this.setVariables();

} else if(userAnswer = randNumber) {
alert('You Got It Right!');
document.getElementById('message').innerHTML = "You Guessed Right!";



render: function(userAnswer, randNumber, timesGuessed) {
document.getElementById('demo1').innerHTML = randNumber;
document.getElementById('your-number').innerHTML = userAnswer;
document.getElementById('guessed').innerHTML = timesGuessed;


score: function(timesGuessed) {
if(timesGuessed <= 5) {
document.getElementById('count').innerHTML = "You Won! It took you " + this.timesGuessed + " try(s) to guess the right number!";
} else if (timesGuessed > 5) {
document.getElementById('count').innerHTML = "Sorry! You Lost... It took you " + this.timesGuessed + " try(s) to guess the right number.";

showAnswers: function() {
// Show all answers
for (var i = 0; i < this.computerNumbers.length; i++) {
var listItem = document.createElement('TD');
var listItemText = document.createTextNode(this.computerNumbers[i]);

// Show all guesses
for (var i = 0; i < this.userAnswers.length; i++) {
var listItem = document.createElement('TD');
var listItemText = document.createTextNode(this.userAnswers[i]);

restartGame: function() {
document.getElementById('start-btn').innerHTML = 'Play Again';


This is my console


The () at the end invoke the function immediately; just leave that out and you should be good.

 .... .on('click', setVariables )