随机生成数字和检查匹配数字

-1

我对JavaScript和HTML仍然陌生。我的任务是从1到3生成2个随机整数值。按下“Match！”按钮，如果两个数字相同或不相同，警告框会通知用户。不知道为什么我的代码无法正常工作。任何帮助表示赞赏。随机生成数字和检查匹配数字

演示：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>

来源

2016-02-28 user5992661

阅读本https://blog.udemy.com/jquery-vs-javascript/ –

感谢您的信息！ @RodneySalcedo – user5992661

正如你所见，恕我直言，你不需要Jquery来做到这一点。你能行的。你可以用JavaScript平面静静地做它，Jquery是强制性的吗？ http://stackoverflow.com/questions/2340412/jquery-vs-javascript –

试试这个代码

<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>

来源

2016-02-28 07:36:00 thanhpk

我将a和b分别改为相应的id，number1和number2。然而游戏应用程序不起作用。 – user5992661

我添加了一些html代码，所以你可以粘贴并运行 – thanhpk

我更新了代码，但数字没有随机生成。 https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK – user5992661

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

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/

来源

2016-02-28 07:44:20

这是调试时得到的错误信息。 Uncaught ReferenceError：没有为脚本行5定义按钮。我完全复制您输入的内容，并将代码粘贴到我的javascript中运行。但它似乎没有工作。 – user5992661

@ user5992661'button'这里只是举例。尝试从小提琴https://jsfiddle.net/1rp5xvte/1/ –

运行完整的代码测试出来，但没有运行。 https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK – user5992661

随机生成数字和检查匹配数字

回答

相关问题