www.webdeveloper.com
Results 1 to 9 of 9

Thread: Coders Unite! Javascript help, what's wrong with my code?

  1. #1
    Join Date
    Mar 2014
    Posts
    4

    Unhappy Coders Unite! Javascript help, what's wrong with my code?

    I am new to coding and am not sure what is wrong with my current code. Currently i'm using HTML and JS. Here is what I'm trying to do: Create a random number generator from values 1-4. I want the generator to initiate when a submit button is pressed. I get the generator to work and appear on the document however, once I try to switch it to the submit button it stops working. Any help would be highly appreciated. Here is what I have thus far:

    <html>
    <body>
    <textarea rows="1" cols="25" id="option1">
    </textarea>
    <textarea rows="1" cols="25" id="option2">
    </textarea>
    <textarea rows="1" cols="25" id="option3">
    </textarea>
    <textarea rows="1" cols="25" id="option4">
    </textarea>
    <button id="clickme" name="subject" type="submit" value="Submit">Submit</button>

    <p></p>
    <script type="text/javascript">
    var random = Math.floor(Math.random()*5)
    var number = function(random);
    $(".clickme").click(number) {
    if(number == 0 || number == 5) {
    document.write("Still thinking...Click again.");
    }
    else
    {
    document.write(number);
    }
    </script>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Are you trying to set the number on the button itself?

    Something like this will do that: jQuery(".clickme").html(number);

  3. #3
    Join Date
    Mar 2014
    Posts
    4
    I am yes.

    Basically when I click the button, I want the random number code to generate a random number which than appears (preferable within a textbox which I have with the id of "box"). However, though i can get the random number generator to work on it's own, I cannot get it to work with a click of the button.

    If that makes sense?

  4. #4
    Join Date
    Mar 2014
    Posts
    4
    Also, I did try using "$(".clickme").html(number);" in place of my code "$(".clickme").click(number)" however that didn't seem to resolve the issue

  5. #5
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    <script type="text/javascript">
    var random = Math.floor(Math.random()*5)
    var number = function(random);
    $(".clickme").click(number) {
    if(number == 0 || number == 5) {
    jQuery(".clickme").html("Still thinking...");
    }
    else
    {
    jQuery(".clickme").html(number);
    }
    </script>

  6. #6
    Join Date
    Mar 2014
    Posts
    4
    I tried adding this as well however, to no avail unfortunately.

  7. #7
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Do you get any javascript errors - using f12 in chrome and going to console, it will display any errors.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Quote Originally Posted by eprunier View Post
    I am new to coding and am not sure what is wrong with my current code. Currently i'm using HTML and JS. Here is what I'm trying to do: Create a random number generator from values 1-4. I want the generator to initiate when a submit button is pressed. I get the generator to work and appear on the document however, once I try to switch it to the submit button it stops working. Any help would be highly appreciated. Here is what I have thus far:

    <html>
    <body>
    <textarea rows="1" cols="25" id="option1">
    </textarea>
    <textarea rows="1" cols="25" id="option2">
    </textarea>
    <textarea rows="1" cols="25" id="option3">
    </textarea>
    <textarea rows="1" cols="25" id="option4">
    </textarea>
    <button id="clickme" name="subject" type="submit" value="Submit">Submit</button>

    <p></p>
    <script type="text/javascript">
    var random = Math.floor(Math.random()*5)
    var number = function(random);
    $(".clickme").click(number) {
    if(number == 0 || number == 5) {
    document.write("Still thinking...Click again.");
    }
    else
    {
    document.write(number);
    }
    </script>
    </body>
    </html>
    1. this code looks like it it using jQuery, but has no jQuery library linked. the code, as it is posted, will never work.
    2. also using document.write() after the page has been fully loaded will destroy the current document instead of add anything into it
    3. $(".clickme").click(... in jQuery means "to do something when any element having CLASS 'clickme' is clicked", but you have no any elements having this class in your code - only the button with id="clickme".
    4. if you count opening and closing braces in your code you will see that their numbers are not equal
    Code:
    $(".clickme").click(number) {
    if(number == 0 || number == 5) {
    document.write("Still thinking...Click again.");
    } 
    else 
    {
    document.write(number);
    }
    5.
    Code:
    $(".clickme").click(number) {
    bla-bla-bla
    this code is wrong. this must be something like $(".clickme").click(); or $(".clickme").click(function(){bla-bla-bla});

    6. if you were using error console you could see in there something like this:

    Inline script compilation
    Syntax error at line 21 while loading: syntax error
    r = function(random);
    --------------------^
    Last edited by Padonak; 03-03-2014 at 12:58 AM.

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    working example

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
    button{cursor:pointer;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
    
    $('#clickme').click(function(){
    var rand=Math.floor(Math.random()*5),
        txt='';
    /* full version */
    
    /*
    if(rand==0 || rand==5){txt='Still thinking...Click again.';}
    else{txt=rand;}
    $('#comment').html(txt);
    */
    
    /* short version no var 'txt' needed*/
     $('#comment').html((rand==0 || rand==5)?'Still thinking...Click again.':rand);
    });
    
    });
    </script>
    </head>
    <body>
    <textarea rows="1" cols="25" id="option1"></textarea>
    <textarea rows="1" cols="25" id="option2"></textarea>
    <textarea rows="1" cols="25" id="option3"></textarea>
    <textarea rows="1" cols="25" id="option4"></textarea>
    <button id="clickme">Submit</button>
    <p id="comment"></p>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles