随机生成数字并检查匹配数字答案

【问题标题】：Randomly Generate Numbers and Check Matching numbers随机生成数字并检查匹配数字
【发布时间】：2016-02-28 07:32:12
【问题描述】：

我对 javascript 和 HTML 还是很陌生。我的任务是生成 2 个从 1 到 3 的随机整数值。按下“匹配！”后按钮，一个警告框会通知用户这两个数字是否相同。不知道为什么我的代码不起作用。任何帮助表示赞赏。

演示：https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK

$(document).ready(function(){
function myFunction() 
{
    document.getElementById("generatedNum").innerHTML = Math.random();
{
    if (generateNum1 == generateNum2) {
        alert ("Both numbers are the same");
    }
    else {
        alert("Both numbers are different");
    }
    displayGeneratedNum ();
}
}

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab Report</title>
<script src="jquery.js"></script>
<script src="myScript.js"></script>

<style>
body{font-size:40px;
text-align:center;
background-color: antiquewhite;}
table {margin-top:100px;
background-color:white;}
td { width:150px;}
span {font-size:40px;}
#correctScore{
background-color:green;
}
#wrongScore{
background-color:red;

}
#missedScore{
background-color:blueviolet;

}
.numberStyle {
padding: 10px 10px 10px 10px; 
color:blue;
}

.numberStyle span {
font-size:100px;
}
</style>
</head>

<body>


<table width="800" border="1" align="center">
<tr>
<td id="generatedNum" colspan="6" align="left"><span>Random Numbers
generated : 1</span></td>
</tr>      
<tr>
<td colspan="3" align="center">Number 1</td>
<td colspan="3" align="center">Number 2</td>
</tr>    

<tr>
<td colspan="3" id="number1" class="numberStyle"><span>1</span></td>
<td colspan="3" id="number2" class="numberStyle"><span>2</span></td>
</tr>

<tr height="50px";>
<td colspan="6"><input type="button" value="MATCH!" style="font-size:50px;">        
</input></td>

</tr>
<tr>
<td>Correct:</td>
<td id="correctScore"><span>0<span></td>
<td><span>Wrong<span></td>
<td id="wrongScore"><span>0<span></td>
<td><span>Missed<span></td>
<td id="missedScore"><span>0<span></td>

</tr>
</table>

</body>
</html>

【问题讨论】：

阅读此blog.udemy.com/jquery-vs-javascript
感谢您的信息！ @RodneySalcedo
您肯定已经看到，恕我直言，您不需要 Jquery 来执行此操作。你能行的。你可以用 javascript plane 悄悄地做，Jquery 是强制性的吗？ stackoverflow.com/questions/2340412/jquery-vs-javascript
检查你的小提琴演示

标签： javascript

【解决方案1】：

试试这个代码

<html><body><label id='lbl'></label><button id="btn">Match!</button><script src="https://code.jquery.com/jquery-2.2.1.min.js"></script><script>
function randomNumber(a,b)
    {
        if(b == undefined) {
            b = a - 1;
            a = 0;
        }
        var delta = b - a + 1;
        return Math.floor(Math.random()*delta) + a
    }

$(document).ready(function(){ 
 $('#btn').click(function()
 {
  var generateNum1 = randomNumber(1,3);
  var generateNum2 = randomNumber(1,3);

    if (generateNum1 == generateNum2) {
        alert ("Both numbers are the same");
    }
    else {
        alert("Both numbers are different");
    }
    $('#lbl').html(generateNum1 + ";" + generateNum2);
 })
});
</script></body></html>

【讨论】：

我将 a 和 b 分别更改为各自的 id、number1 和 number2。但是游戏应用程序没有工作。
我更新了代码，但数字不是随机生成的。 jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK

【解决方案2】：

你需要一个在一个范围内生成随机整数的函数。

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

button.addEventListener('click', function() {
  var num1 = getRandomInt(1, 3);
  var num2 = getRandomInt(1, 3);

  alert(num1 === num2 ? 'Both numbers are the same' : 'Both numbers are different');
});

JSFiddle 演示：https://jsfiddle.net/1rp5xvte/1/

【讨论】：

这是我调试时得到的错误信息。 Uncaught ReferenceError: button is not defined for script line 5. 我完全复制了您键入的内容并将代码粘贴到我的 javascript 中以运行。但是它似乎没有用。
@user5992661 button 这里只是示例。尝试从小提琴jsfiddle.net/1rp5xvte/1运行完整代码
经过测试但没有运行。 jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK