Javascript/JQuery Math.random to onclick fade to

Question

I am making a simple game for my school project and the basic Idea is when you press a button to start the game random images will fade in and you have to click as many of them as you can in 30 seconds. I am using Math.random and Javascript for if statements and JQuery for its built in onclick and fadeTo. The function is not working however and I dont know why.Here is my html

<!DOCTYPE html>
<html>
<head>
<title>My test game</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Click as many as you can in 30 seconds</h1>
<input id="clickMe" type="button"  value="clickme"onclick="randomNumFunc();" />
<!-- Game Area -->
<div id="game-area">
<div id="circle1"></div>
</div>
<!-- Javascript/Jquery -->
<script src="js/JQuery.js"></script>
<script src="js/script.js"></script>
</body>

CSS:

body {
background-color: #CEF6F5;
}

#game-area {
border: 5px solid black;
height: 500px;
background-color: white;
}

#circle1 {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;  
opacity: 0.5;
}

and Javascript/Jquery:

/* RNG variable */
var randomNum = Math.floor((Math.random() * 3) + 1);

/* Picture Assignments */
var pic1 = 1;
var pic2 = 2;
var pic3 = 3;

/* RNG Code */

function randomNumFunc() {
document.getElementById('#circle1').innerHTML;
if (randomNum == 1) {
$(document).ready(function() {
  $(document).fadeTo('fast', 1);
});
$(document).onclick(function() {
  $(document).fadeTo('fast', 0);
});
}
}

@SLaks Sorry im in a rush So i forgot to ask the most important part. Updated — cloudWhiz18512
– cloudWhiz18512, Commented Aug 19, 2015 at 17:00
What does "not working" mean? What do you see in the console? — SLaks
– SLaks, Commented Aug 19, 2015 at 17:00
document.getElementById('#circle1').innerHTML; Just use circle1, # is when you want to use selector to select the id. And even its valid, you didn't assign it to any variable, or assign value to it, what do you want the value to do? — fuyushimoya
– fuyushimoya, Commented Aug 19, 2015 at 17:01
@SLaks Uncaught TypeError: Cannot read property 'innerHTML' of null. Im new to javascript/Jquery so What does that mean? — cloudWhiz18512
– cloudWhiz18512, Commented Aug 19, 2015 at 17:03

Sudhansu Choudhary · Accepted Answer · 2015-08-19 17:14:19Z

1

Your <input> element should be,

<input id="clickMe" type="button" value="clickme"/>

And the javaScript/jQuery code look like,

$(document).ready(function() {
var randomNum = Math.floor((Math.random() * 3) + 1);
    $('#clickMe').click(function(){
      if(randomNum == 1){
        $('#circle1').fadeTo('fast', 1);
      }
    else{
       $('#circle1').fadeTo('fast', 0);
     }
    })

});

answered Aug 19, 2015 at 17:14

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Gutierrez · Accepted Answer · 2015-08-19 17:37:31Z

0

I think that this is what you want:

script.js:

$(document).ready(function() {

    var pic1 = 1;
    var pic2 = 2;
    var pic3 = 3;

    var randomNum = Math.floor((Math.random() * 3) + 1); //every time you click it, will be generate a new randonNum
    console.log(randoNum); //It will show in console the number

    $('#clickMe').click(function() {

        if (randomNum  == 1) {
            $('#circle1').fadeIn('fast');
        } else {
            $('#circle1').fadeOut('fast');
        }
    });

});

and you can remove the onClick method in the input:

<input id="clickMe" type="button"  value="clickme" />

edited Aug 19, 2015 at 17:37

answered Aug 19, 2015 at 17:23

Kevin Gutierrez

161 silver badge4 bronze badges

Collectives™ on Stack Overflow

Javascript/JQuery Math.random to onclick fade to

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related