Create two random values with javascript onclick event

Question

I'm trying to store two random numbers between 0 and 10, in two different variables play1 and play2.

The maximum value for play2 will be 10 minus play1 value, ie, if play1 gets 6, maximum value for play2 will be 4.

how can I trigger play2 to store the second value? I need it to be triggered with a second click.

var min = 0;
var max = 10;
var play1;
var play2;


function myFunction() {
  play1 = Math.floor(Math.random() * (max - min + 1)) + min;
  max = 10 - play1
  document.getElementById("result").innerHTML = play1;
  
  if (play1 < 10 ) {
    //trigger play2 
  } 
  
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>

simply play2 = Math.floor(Math.random() * (max - min + 1)) + min; is it not? — Jaromanda X
– Jaromanda X, Commented Oct 3, 2017 at 23:22
Hi Jaromanda X, i've edited the question as i forgot to mention i needed the second value to be also triggered by a second click — João Mateus
– João Mateus, Commented Oct 3, 2017 at 23:41

Shekhar Chikara · Accepted Answer · 2017-10-03 23:26:33Z

2

You can simply calculate the value of play2 the same way you calculated the value of play1 by using - play2 = Math.floor(Math.random()*(max-min+1)) + min;. I have updated your code below-

var min = 0;
var max = 10;
var play1;
var play2;


function myFunction() {
  play1 = Math.floor(Math.random() * (max - min + 1)) + min;
  max = 10 - play1
  document.getElementById("result").innerHTML = play1;
  
  if (play1 < 10 ) {
    play2 = Math.floor(Math.random()*(max-min+1)) + min; 
  } else {
    play2 = 0;
  }
  document.getElementById("result2").innerHTML = play2;
  
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>
<p id="result2"></p>

answered Oct 3, 2017 at 23:26

Shekhar Chikara

3,8322 gold badges32 silver badges53 bronze badges

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

1 Comment

João Mateus Over a year ago

Thats spot on, but now i see I made the wrong question, i need the second value to be triggered with a second click. my apologies for the mistake.

Thomas · Accepted Answer · 2017-10-04 00:06:05Z

1

Don't repeat yourself. That's what functions are for:

function r(min, max){
  return Math.floor(Math.random() * (max-min+1)) + min;
}

var min = 0;
var max = 10;
var play1;
var play2;

function myFunction() {
  play1 = r(min, max);  
  play2 = r(min, max - (play1-min)); 

  document.getElementById("result").innerHTML = [play1, play2];
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>

i need the second value to be triggered with a second click.

function r(min, max){
  return Math.floor(Math.random() * (max-min+1)) + min;
}

var min = 0;
var max = 10;
var play1;
var play2;
var nthClick = 0;

function myFunction() {
  ++nthClick;
  if(nthClick & 1){
    //odd
    play1 = r(min, max);
    play2 = null;
  }else{
    //even
    play2 = r(min, max - (play1-min)); 
  }
  document.getElementById("result").innerHTML = [play1, play2];
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>

like this?

edited Oct 4, 2017 at 0:06

answered Oct 3, 2017 at 23:32

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

2 Comments

João Mateus Over a year ago

Thats spot on, but now i see I made the wrong question, i need the second value to be triggered with a second click. my apologies for the mistake

Thomas Over a year ago

@JoãoMateus I've extended the answer. Better?

Jaromanda X · Accepted Answer · 2017-10-03 23:58:22Z

1

Perhaps this

var min = 0;
var max = 10;
var play1;
var play2;


function myFunction() {
    var target = document.getElementById("result");
    var firstNum = parseInt(target.innerHTML);
    if (isNaN(firstNum)) { // first click
        play1 = Math.floor(Math.random() * (max - min + 1)) + min;
        target.innerHTML = play1;
    } else {
        play2 = Math.floor(Math.random() * ((10 - firstNum) - min + 1)) + min;
        // do what with it????? you haven't shown!
        document.getElementById("result2").innerHTML = play2;
    }  
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>
<p id="result2"></p>

answered Oct 3, 2017 at 23:58

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Comments

Zach A · Accepted Answer · 2017-10-03 23:58:32Z

1

Try adding a control to the click count. Code copied and modified from Thomas' answer

var controlVariable = 1;

function r(min, max){
  return Math.floor(Math.random() * (max-min+1)) + min;
}

var min = 0;
var max = 10;
var play1;
var play2;

function myFunction() {
  if (controlVariable == 1) {
    play1 = r(min, max);
    controlVariable++; 
  }
  else if (controlVariable == 2) {
    play2 = r(min, max - (play1-min));
    controlVariable = 1;
  }

  document.getElementById("result").innerHTML = [play1, play2];
}

<button onclick="myFunction()">Click me</button>
<p id="result"></p>

answered Oct 3, 2017 at 23:58

Zach A

511 silver badge6 bronze badges

1 Comment

João Mateus Over a year ago

this is it! it works! great tip with the controlvariable, took me a while to get it but i see what you did there. thank you very much Zach A

Collectives™ on Stack Overflow

Create two random values with javascript onclick event

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related