Randomly Generate Numbers and Check Matching numbers

Question

I am still new to javascript and HTML. My task is to generate 2 random integer values from 1 to 3. Upon pressing the "Match!" button, an alert box informs the user if the two numbers are the same or not the same. Not sure why my code isn't working. Any help is appreciated.

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

As you have surely seen, IMHO you don't need Jquery to do this. You can do it. You could do it quietly with javascript plane, Is Jquery mandatory? http://stackoverflow.com/questions/2340412/jquery-vs-javascript — Rodney Salcedo, Feb 28 '16 at 17:42

thanhpk · Answer 1 · 2016-02-28T07:42:53.783

0

try this code

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

edited Feb 28 '16 at 07:42

answered Feb 28 '16 at 07:36

thanhpk

3,900
4
29
36

I changed a and b to the respective id, number1 and number2 respectively. However the game application didn't work. – user5992661 Feb 28 '16 at 07:42
I updated the codes but the numbers didn't randomly generate. https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK – user5992661 Feb 28 '16 at 08:19

score 0 · Answer 2 · answered Feb 28 '16 at 07:44

0

You need a function that generated a random integer within a range.

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 Demo: https://jsfiddle.net/1rp5xvte/1/

answered Feb 28 '16 at 07:44

Miguel Mota

20,135
5
45
64

This is the error message I got when debugging. Uncaught ReferenceError: button is not defined for script line 5. I copy exactly what you type and paste the code in my javascript to run. However it didn't appear to work. – user5992661 Feb 28 '16 at 07:51
@user5992661 `button` here is just and example. Try running the full code from the fiddle https://jsfiddle.net/1rp5xvte/1/ – Miguel Mota Feb 28 '16 at 07:54
tested out but didn't run. https://jsfiddle.net/1rp5xvte/5/#&togetherjs=pJcEH56yoK – user5992661 Feb 28 '16 at 08:10

Randomly Generate Numbers and Check Matching numbers

2 Answers2