Hello All,
I am a beginner to javascript and would like to learn how to call a function which I implemented, called random, two times, with two seperate div buttons.
I have tried several times to de-bug the code, somehow it still does not work.
My question : Does it have to do with the javascript .click() function?
Thanks,
Code is below :)
JSP:
<%--
Document : Diagnostic
Created on : 08-Nov-2010, 10:32:12
Author : axa952
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/Diagnostic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery/Diagnostic.js"></script>
<title>Diagnostic Page</title>
</head>
<body>
<script type="text/javascript"></script>
<center>
<center><h1>Let's see...</h1></center>
<div id="page-wrap" class ="transbox">
Add these two numbers:
<br />
<button ihttp://www.jobs.ac.uk/job/ABO044/epsrc-funded-phd-studentship/d="getit">Start!</button>
<div id="n1"></div>
<div id="n2"></div>
<div id="plus">
<img src="Images/plus.gif" align="center">
</div>
<input type="text" id="numCheck" value="?"/>
<br>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery/Diagnostic.js"></script>
>
<title>Diagnostic Page< <button id="check"> Check! </button>
<div id="result"></div>
</div>
<div id="new" class="second">
Subtract these two numbers:
> <br />
<button id="getit">Pick!</button>
<div id="n1"></div>
<div id="n2"></div>
<div id="plus">
<img src="Images/plus.gif" align="center">
</div>
<input type="text" id="numCheck" value="?"/>
<br>
<button id="check"> Check! </button>
<div id="result1"></div>
</div>
</center>
</body>
</html>
Java Script
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
var numRand1;
var numRand2;
function IsNumeric(n){
return !isNaN(n);
}
$(function random(){
//when you click on get it, it returns two random numbers between 1 and 100
$("#getit").click(function() {
var numLow = 1
var numHigh = 100
var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
var numRand1 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
var numRand2 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh))
&& (numLow != '') && (numHigh != '')) {
$("#n1").text(numRand1);
$("#n2").text(numRand2);
} else {
$("#n1").text("Careful now...");
$("#n2").text("Careful now...");
}
return false;
});
//an input field, clicked
$("input[type=text]").each(function(){
$(this).data("click", true);
});
$("input[type=text]").focus(function(){
if ($(this).data("click")) {
$(this).val("");
$(this).data("click", false);
$(this).css("color", "black");
}
});
//when clicked on check, it returns the result of the two random numbers added
$("#check").click(function(){
var entered = $("#numCheck").val();
var result = numRand1 + numRand2;
var x = $("#n1").text();
var xNum = parseFloat(x);
var y = $("#n2").text();
var yNum = parseFloat(y);
if((IsNumeric(xNum)) && (IsNumeric(yNum))){
xNum !=0;
yNum !=0
var result = xNum + yNum;
if(entered == result){
$("#result").text("Correct! You got one Point");
}
else if( entered !=result){
$("#result").text( "Wrong! Please try again");
}
}
});
$("input[type=text]").each(function(){
$(this).data("click", true);
$(this).val('');
$(this).data("click",true);
$(this).css(color,"Red");
});
});
CSS
body {
background-color: green;
background-image: url("../Images/whale.jpg");
background-repeat:no-repeat;
background-position: center top;
background-size:100%;
}
input[type=text] { padding: 10px; color: #999; font: bold 20px Helvetica, Sans-Serif;
width: 60px; margin: 10px 0; }
#n1 { font-size: 20px; color:red ;
}
#plus {position: relative; width: 10px; margin: 0 auto; text-align: left;}
#n2 { font-size: 20px; color:black;
}
#result1 { font-size: 20px; color:Red;}
div.transbox
{
width:500px;
height:300px;
margin-left:auto;
margin-right:auto;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
div.second
{
width:500px;
height:300px;
margin-left:auto;
margin-right:auto;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.second
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
