Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calling a jquery function two times :)

    Dear All,

    Hello !

    I would like to learn how to call a jquery function twice, which is to generate a random number, the button I click to generate that number works on every click which is great, however I want another copy of that same button on the end of the page, and that bit is not working.

    This is my code and thanks for all your help,

    I need to learn, not copy code, so clarification is very appreciated


    [CODE]

    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;
    }
    [CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your problem here is that you have two elements with id of click on your page. This is invalid, an id should be unique on the page, and this is why your jQuery isn't working.

    If you replace both of those ids with a class of click instead of an id, and change your function accordingly, you should be fine.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •