Calling a function with different arguments through different buttons- JavaScript

Question

I want to call level(lvl) function with arguments 1, 2 or 3 are passed with respective buttons with id's one, two and three. However, whenever the page loads, the third option is already executed without any clicking. What am I missing, is this not the right way to do this? Here is the javascriptcode.

const level = function(lvl) {

if(lvl === 1) {
  ctx.canvas.width = 400;
  ctx.canvas.height = 400;
  cols = 9;
  rows = 9;
  numbombs = 10;
  console.log("called 1");
  return;
}
if(lvl === 2) {
  ctx.canvas.width = 490;
  ctx.canvas.height = 490;
  cols = 13;
  rows = 13;
  numbombs = 30;
  console.log("called 2");
  return;
}
if(lvl === 3) {
  ctx.canvas.width = 1050;
  ctx.canvas.height = 490;
  cols = 30;
  rows = 14;
  numbombs = 99;
  console.log("called 3");
  return;
}         
};


document.getElementById("one").onclick = level(1);
document.getElementById("two").onclick = level(2);
document.getElementById("three").onclick = level(3);

And the html part

<button id="one" class="lvl">Beginner</button>
<button id="two" class="lvl">Intermediate</button>
<button id="three" class="lvl">Advanced</button>

ArtemSky · Accepted Answer · 2017-12-13 18:12:10Z

2

You should not call a function on assignment, you should bind the call.

document.getElementById("one").onclick = level.bind(null, 1);

or using ES6

document.getElementById("one").onclick = () => level(1);

https://jsfiddle.net/hfsr0bso/

answered Dec 13, 2017 at 18:12

ArtemSky

1,21312 silver badges21 bronze badges

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

Comments

Suren Srapyan · Accepted Answer · 2017-12-13 18:12:15Z

1

You are executing your function and assign the result to the event handler which is undefined. All what you need to return a function from the given function like. Also I have something changed in your code to look better (I think :)).

I have commented the properties assignment for the example to work. In your code you can open them.

const level = function(lvl) {

   function setProperties(width, height, c, r, n) {
      //ctx.canvas.width = width;
      //ctx.canvas.height = height;
      //cols = c;
      //rows = r;
      //numbombs = n;
      console.log(`Called ${lvl}`);
   }

   return function() {
      switch(lvl) {
          case 1:
             setProperties(400, 400, 9, 9, 10);
             break;
          case 2:
             setProperties(490, 490, 13, 13, 30);
             break;
          case 3:
             setProperties(1050, 490, 30, 14, 99);
             break;
      }
   };
}

document.getElementById("one").onclick = level(1);
document.getElementById("two").onclick = level(2);
document.getElementById("three").onclick = level(3);

<button id="one" class="lvl">Beginner</button>
<button id="two" class="lvl">Intermediate</button>
<button id="three" class="lvl">Advanced</button>

edited Dec 13, 2017 at 18:12

answered Dec 13, 2017 at 18:05

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

5 Comments

nkarmyan Over a year ago

Thank you for the help. Շնորհակալ եմ) However, document.getElementById("one").onclick = level(1); document.getElementById("two").onclick = level(2); document.getElementById("three").onclick = level(3); this calls them all, one after the other, so it ends up executing only for level 3

nkarmyan Over a year ago

Except for that it works just fine. Any idea how to make it work only when clicked?

Suren Srapyan Over a year ago

Didn't understand you well. - so it ends up executing only for level 3 - what does this mean? So it works only after click. The call level(1) just returns another function which works at a click

nkarmyan Over a year ago

I meant that I see "Called 1", "called 2, "called 3" printed to the console and the properties of the game are set to those of the level 3. Thus, I guess, the function gets called three times and in the end the result is execution of the level 3, as it is in the end

nkarmyan Over a year ago

all this happens without me clicking anything

AngularJMK · Accepted Answer · 2017-12-13 18:12:50Z

0

You must add function after "=" this is mistake in your code.
    document.getElementById("one").onclick = function(){
        level(1);
    }
    document.getElementById("two").onclick = function(){
    level(2);
    }
    document.getElementById("three").onclick = function(){
    level(3);
    }

answered Dec 13, 2017 at 18:12

AngularJMK

1,27814 silver badges16 bronze badges

Comments

troy.bergstrand · Accepted Answer · 2017-12-13 18:15:41Z

0

You just need to take advantage of a closure.

const level = function(lvl) {
  return function() {
  if(lvl === 1) {
    ctx.canvas.width = 400;
    ctx.canvas.height = 400;
    cols = 9;
    rows = 9;
    numbombs = 10;
    console.log("called 1");
    return;
  }
  if(lvl === 2) {
    ctx.canvas.width = 490;
    ctx.canvas.height = 490;
    cols = 13;
    rows = 13;
    numbombs = 30;
    console.log("called 2");
    return;
  }
  if(lvl === 3) {
    ctx.canvas.width = 1050;
    ctx.canvas.height = 490;  
    cols = 30;
    rows = 14;
    numbombs = 99;
    console.log("called 3");
    return;
  }         
  };
};

answered Dec 13, 2017 at 18:15

troy.bergstrand

12 bronze badges

Collectives™ on Stack Overflow

Calling a function with different arguments through different buttons- JavaScript

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related