On-click assigned function with multiple parameters

Question

I am creating a game which involves numbers. The idea is simple, If i click a number(from 1 to 6) and my code randomly picks one(also from 1 to 6). If my choice(onclick) equals to cpu's choice, the game will be over! If they both are unlikely numbers, my score adds up!

Now the question is, if i click "1" or "2"..(and so on) i need a very new function for all of the numbers.

The code looks like this,

<button id="runs" onclick="i0()">0</button>
<button id="runs" onclick="i1()">1</button>
<button id="runs" onclick="i2()">2</button>
<button id="runs" onclick="i3()">3</button>
<button id="runs" onclick="i4()">4</button>
<button id="runs" onclick="i5()">5</button>
<button id="runs" onclick="i6()">6</button>

I should write each and every function repeatedly which is almost the same! How can i use parameters instead which involves only one function. And how can i add an "if" statement in which the condition should say that i clicked "1".etc

Like,

if(Clicked one//for example) {
    document.getElementById("someId").innerHTML = "You pressed one";//:ex
}

can i use,

function click(i0, i1, i2//etc)
if(i0 == true) {
    //some code
}

Please remember! I need to use parameters (I am new to JavaScript).

score 2 · Answer 1 · answered Apr 16 '18 at 15:14

You don't need a separate function for each button. You can pass a parameter directly to the function call statement:

<button id="runs" onclick="i(0)">0</button>
<button id="runs" onclick="i(2)">1</button>
...

And then in your JS code:

function i(param) {
  ...
}

Read more, here: https://www.w3schools.com/js/js_functions.asp

Scott Marcus · Accepted Answer · 2018-04-16T15:41:25.230

First, you shouldn't be setting up your event handlers with HTML event attributes as that technique is 20+ years old and has many reasons not to use it (one of which is that you'll wind up writing a lot of redundant event handler calls as you are doing now).

Please remember! I need to use parameters

No, you don't (unless this is some sort of school assignment which you didn't state - and if that is the case, get your money back for the course because the instructor shouldn't be teaching you outdated ways of writing code, even for learning purposes). Each button is already displaying the number that corresponds to it. Using a parameter is just more redundancy in the code that makes it more brittle of a solution. You just need a centralized function that runs when any of the buttons gets clicked and then that function can simply compare the random number against the clicked button's content.

Also, you can't have multiple elements with the same id.

Take note of how much cleaner the HTML is when you separate the event handlers out of the HTML and note that this solution works no matter how many buttons you want the game to have. Just make sure that any button that is part of the game has the gameButton class and that the content of the element is the next numeric character that hasn't been used yet.

// Get all buttons into an Array
var buttons = Array.prototype.slice.call(document.querySelectorAll("button.gameButton"));

// Loop over the buttons
buttons.forEach(function(btn){

  // Give each button a click event callback function
  btn.addEventListener("click", function(){
  
    // Generate a random number from 1 to the number of buttons there are in the game
    var num = Math.floor(Math.random() * buttons.length) + 1 ;
    
    var output = "The random was: " + num + ", and the clicked button was: " + this.textContent;
    
    // The prepended + converts the text to a number
    if(num === +this.textContent){
      alert("You win!\n" + output);
    } else {
      alert("Keep trying!\n" + output);
    }    
  });
});

/* Just for fun */
.gameButton{
  background-color:#800080;
  color:#ff0;
  font-weight:bold;
  font-size:2em;
  border-radius:2em;
  box-shadow:2px 2px #808080;
  outline:none;
}

.gameButton:active{
  box-shadow:-2px -2px #808080;
}

<button class="gameButton">1</button>
<button class="gameButton">2</button>
<button class="gameButton">3</button>
<button class="gameButton">4</button>
<button class="gameButton">5</button>
<button class="gameButton">6</button>

Thank you so much for spending your precious time! – Mukunth Apr 16 '18 at 15:49 — Mukunth, Apr 16 '18 at 15:49

score 1 · Answer 3 · answered Apr 16 '18 at 15:22

1

As mentioned, you can not use the same ID on multiple elements.

A good way is to pull the id of the button and pass it to the function, like this:

Have a look at this other question and answers in detail:

How to get ID of button user just clicked?

answered Apr 16 '18 at 15:22

Ralph

1,480
11
16

On-click assigned function with multiple parameters

3 Answers3