使用javascript onclick事件创建两个随机值

时间:2017-10-03 23:14:11

标签: javascript html

我试图在两个不同的变量play1和play2中存储0到10之间的两个随机数。

play2的最大值为10减去play1值,即如果play1为6,则play2的最大值为4。

如何触发play2存储第二个值?我需要通过第二次点击触发它。



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 
  } 
  
}
&#13;
<button onclick="myFunction()">Click me</button>
<p id="result"></p>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:2)

您可以使用 - play2计算play1的值,就像计算play2 = Math.floor(Math.random()*(max-min+1)) + min;的值一样。我已在下面更新了您的代码 -

&#13;
&#13;
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;
  
}
&#13;
<button onclick="myFunction()">Click me</button>
<p id="result"></p>
<p id="result2"></p>
&#13;
&#13;
&#13;

答案 1 :(得分: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() {
  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>

  

我需要通过第二次点击触发第二个值。

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>

像这样?

答案 2 :(得分:1)

也许这个

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>

答案 3 :(得分:1)

尝试将控件添加到点击次数。 从托马斯回答中复制和修改的代码

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>