samedi 22 avril 2017

javascript program not functionning

i'm still new in javascript. I am trying to make a program that contains 2 buttons and once a button is clicked, it creates a random number.The problem is that when i'm trying to compare them,it is not showing which one is bigger.First i thought the problem is that the variabes aren't global but it didn't change anything.Can someone help me find the problem please?

Here is the js code:

var par1=document.getElementById("para1");
var par2=document.getElementById("para2");
var winner=document.getElementById("win");
function button1(){
num1=Math.floor(Math.random()*7);
par1.innerHTML=num1;
}
function button2(){
num2=Math.floor(Math.random()*7);
par2.innerHTML=num2;
}
if(num1>num2){
winner.innerHTML="the winner is player 1";
}else{
winner.innerHTML="the winner is player 2";
}

And here is the html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dicestimulator</title>
<link rel="stylesheet" href="dicestimulator.css">
</head>
<body>
<div class="container">
<div>
<h1>Player1</h1>
<button type="button" name="button1" onclick="button1()" id="but1">roll 
dice</button>
<p id="para1">Click the button to see what you get</p>
</div>
<div>
<h1>Player2</h1>
<button type="button" name="button2" id="but2" onclick="button2()">roll 
 dice</button>
 <p id="para2">Click the button to see what you get</p>
 </div>
 <p id="win">let's see who wins!!!</p>
 <script src="dicestimulator.js"></script>
 </div>
 </body>
 </html>

Aucun commentaire:

Enregistrer un commentaire