var hexBeat;
function clarity() {
setInterval(function() {
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
hexBeat = randomNumber(1, 25);
console.log(hexBeat);
}
}, 1000)
}
while (hexBeat <= 20) {
document.querySelector("#nachoCheddar01").style.backgroundColor = "green";
document.querySelector("#nachoCheddar01").style.left = "200px";
}
<html>
<body>
<button onClick="clarity()" style="z-index:1">click for random number in console</button>
<div id="nachoCheddar01" style="z-index: -1; box-sizing:border-box;border:3px solid green;background-color: blue;position:absolute;top:1%;height:100px;width:200px;">NachoCheddar01</div>
<div id="nachoCheddar02" style="">NachoCheddar02</div>
<div id="nachoCheddar03" style="">NachoCheddar03</div>
<div id="nachoCheddar04" style="">NachoCheddar04</div>
</body>
</html>
I am trying to log hexBeat, then based on that I would like to move the rectangle to the right on the screen every time there is a random number less than or equal to 20, and also change its color. But right now I'm failing to get the console.log(hexBeat)
I tried declaring the variable outside of any function. I'm trying to use that variable, hexBeat inside another function, and I have had success declaring my variables like that. Although, I'm using intervals, and I'm not sure if there is a better way to approach moving the rectangle every time there is a random number less than or equal to 20.
You can update your code like this:
HTML:
<html>
<body>
<button onClick="clarity()" style="z-index:1">click for random number in console</button>
<div class="wrapper">
<div id="nachoCheddar01" style="z-index: -1; box-sizing:border-box;border:3px solid green;background-color: blue;position:absolute;top:1%;height:100px;width:200px;">NachoCheddar01</div>
<div id="nachoCheddar02" style="">NachoCheddar02</div>
<div id="nachoCheddar03" style="">NachoCheddar03</div>
<div id="nachoCheddar04" style="">NachoCheddar04</div>
</div>
</body>
</html>
CSS:
.wrapper {
position: relative;
}
#nachoCheddar01 {
position: absolute;
}
JAVASCRIPT:
var hexBeat;
function clarity() {
setInterval(function() {
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
hexBeat = randomNumber(1, 25);
if (hexBeat <= 20) {
console.log(hexBeat);
document.querySelector("#nachoCheddar01").style.backgroundColor = "green";
document.querySelector("#nachoCheddar01").style.left = `${document.querySelector("#nachoCheddar01").offsetLeft + 200}px`;
}
}, 1000)
}
Related
It's been a while since I've used html and am trying to make a simple dice rolling website. However, the images don't change in the text file, after I press the designated button. I've tried everything I could think of, and have spent 5+ hours trying to figure out why it does work.
<html>
<h1>Dice roller</h1>
<p>Roll a dice to recieve a reward base on your roll.</p>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dieroll = 0;
function roll(){
var image = document.getElementById("dice");
dieroll = getRandomInt(1,6);
document.getElementById("result").innerHTML = dieroll;
if (dieroll==1){
image.src="1die.jpg";
} else {
if (dieroll ==2){
image.src="2die.jpg";
}
} else {
if (dieroll==3){
image.src="3die.jpg";
}
} else {
if (dieroll==4){
image.src="4die.jpg";
}
} else {
if (dieroll==5){
image.src="5die.jpg";
}
} else {
if (dieroll==6){
image.src="6die.jpg";
}
}
}
</script>
<body>
<button onclick="roll()">Click me to roll</button>
</body>
<h2>The value for your roll is: <div id="result"></div></h2>
<div>
<img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">
</div>
</html>
Additionally, the images I'm trying to use file names are entered correctly, and the original image appears just fine, just changing it is what isn't working.
Your if else statements had several errors, here it is fixed.
Other than that you have to make sure the images, such as 4die.jpg, are in the same directory as your html file, otherwise you need to print the full absolute or relative html, for example /images/4die.jpg or images/4die.jpg
<html>
<h1>Dice roller</h1>
<p>Roll a dice to recieve a reward base on your roll.</p>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dieroll = 0;
function roll(){
var image = document.getElementById("dice");
dieroll = getRandomInt(1,6);
document.getElementById("result").innerHTML = dieroll;
if (dieroll==1){
image.src="1die.jpg";
} else if (dieroll ==2){
image.src="2die.jpg";
} else if (dieroll==3){
image.src="3die.jpg";
} else if (dieroll==4){
image.src="4die.jpg";
} else if (dieroll==5){
image.src="5die.jpg";
} else if (dieroll==6){
image.src="6die.jpg";
}
}
</script>
<body>
<button onclick="roll()">Click me to roll</button>
</body>
<h2>The value for your roll is: <div id="result"></div></h2>
<div>
<img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">
</div>
</html>
The reason why it did not work was because your nested if-else statements were too messed up. Here is a better approach using switch case.
You can inspect to see change in src:
Working snippet :
<html>
<h1>Dice roller</h1>
<p>Roll a dice to recieve a reward base on your roll.</p>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dieroll = 0;
function roll() {
var image = document.getElementById("dice");
dieroll = getRandomInt(1, 6);
document.getElementById("result").innerHTML = dieroll;
switch (dieroll) {
case 1:
image.src = "1die.jpg";
break;
case 2:
image.src = "2die.jpg";
break;
case 3:
image.src = "3die.jpg";
break;
case 4:
image.src = "4die.jpg";
break;
case 5:
image.src = "5die.jpg";
break;
case 6:
image.src = "6die.jpg";
}
}
</script>
<body>
<button onclick="roll()">Click me to roll</button>
</body>
<h2>The value for your roll is:
<div id="result"></div>
</h2>
<div>
<img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">
</div>
</html>
Well, it should have been a very, very long time since you last worked with HTML/javascript. Your code is well written programatically, but doesn't work due to several syntax errors.
To start with, you have some elements outside of the <body> elements. Moving to the javascript, you cannot have an else statement, unless it is preceded by either an if or else if statement. Instead of
if (condition1) {
// do something
} else {
if(condition2) {
// do something else
}
}
you need to use
if (condition1) {
// do something
} else if(condition2) {
// do something else
}
After applying these fixes, your code works as it should:
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dieroll = 0;
function roll() {
var image = document.getElementById("dice");
dieroll = getRandomInt(1, 6);
document.getElementById("result").innerHTML = dieroll;
if (dieroll == 1) {
image.src = "1die.jpg";
} else if (dieroll == 2) {
image.src = "2die.jpg";
} else if (dieroll == 3) {
image.src = "3die.jpg";
} else if (dieroll == 4) {
image.src = "4die.jpg";
} else if (dieroll == 5) {
image.src = "5die.jpg";
} else if (dieroll == 6) {
image.src = "6die.jpg";
}
}
<button onclick="roll()">Click me to roll</button>
<h2>The value for your roll is:
<div id="result"></div>
</h2>
<div>
<img src="https://th.bing.com/th/id/OIP.a84-UisZ9wZzwQZdXumxTgHaHV?w=174&h=180&c=7&o=5&pid=1.7" id="dice" width="100" height="100">
</div>
You have 5 else statements after your initial if statement. You're gonna want to change them to either "if" or "else if" statements and that should do the trick.
FROM:
if(dieroll==1)image.src="1die.jpg";} else {if (dieroll ==2){image.src="2die.jpg";}
TO:
if(dieroll==1){image.src="1die.jpg";}else if (dieroll
==2){image.src="2die.jpg";}
and so on
I'm trying to create Slot Machine effect for lottery.
The target numbers will be already set, so that once the stop button is pressed it should stop on that number.
Everything is working fine for slot 1. But if I add the same code for slot 2 and slot 3 then it's creating the problem.
Below given is the code:
$(document).ready(function() {
s1 = 1;
s2 = 1;
s3 = 1;
num1 = 6;
num2 = 5;
num3 = 7; //Target for 3 slots
i = 100; //Top margin for animation
$('#start').click(function() {
animateslot(50, 0);
});
$("#stop").click(function() {
stopanimationslot1(50, 0);
});
});
function animateslot(d = 150, i = 0) {
i = i + 100;
$('#slot1').animate({
marginTop: -i
}, {
duration: d,
complete: function() {
$("#slot1").append("<h3>Column " + s1 + "</h3>");
s1++;
if (s1 > 9) {
s1 = 1;
}
console.log(s1);
animateslot(d, i);
}
});
//If below given code is added it doesn't work**
/*
$('#slot2').animate(
{
marginTop: -i
},
{
duration: d,
complete: function() {
$("#slot2").append("<h3>Column "+s2+"</h3>");
s2++;
if(s2>9){
s2 = 1;
}
console.log("s2="+s2);
animateslot(d, i);
}
}
);
*/
}
function stopanimationslot1(d = 150, i = 0, num = 1) {
$('#slot1').stop();
i = i + 100;
$('#slot1').animate({
marginTop: -i
}, d, function() {
if (Math.abs(i / 100) == num1) {
$('#slot1').clearQueue().stop(false, true);
console.log("finished");
} else {
$("#slot1").append("<h3>Column " + s1 + "</h3>");
s1++;
if (s1 > 9) {
s1 = 1;
}
stopanimationslot1(d + 50, i, num);
}
});
}
#slot1 h3,
#slot2 h3,
#slot3 h3 {
width: 100px;
height: 100px;
border: 1px solid #999;
margin: 0;
}
#slotmachine {
max-height: 100px;
overflow: hidden;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Start<br><br>
Stop<br><br>
<div class="container">
<div class="row" id="slotmachine">
<div class="col-sm-4" id="slot1">
<h3>Column 1</h3>
</div>
<div class="col-sm-4" id="slot2">
<h3>Column 1</h3>
</div>
<div class="col-sm-4" id="slot3">
<h3>Column 1</h3>
</div>
</div>
</div>
Also can be found here: https://jsfiddle.net/sushanttayade123/fqkgvu59/
The reason why it's not working as expected lies in animateslot(d, i);.
After pressing start:
Slot 1 completes and calls animateslot()
Slot 2 completes and also calls animateslot()
On the next "animation cycle", the method will not run once as it did before, but twice, which results in the stuttery behaviour. The amount of calls will constantly grow at a factor of two for every cycle.
To fix this, either call animateSlot() once after all animations have completed or move every slot into it's own function (animateSlot1(), animateSlot2(), ...).
A word of advice at the end: I wouldn't recommend adding a new node after every spin, as this can cause performance drops.
I'm currently using a setInterval function in JavaScript for an HTML page. It has a button that allows me to start a countdown from 10 to 0 with a 1 second interval, and every time I press the button the countdown is supposed to reset. However, after the first button press the next countdown messes up the interval badly.
var count;
function countdown() {
count = 10;
var repeat = setInterval(reduce, 1000);
}
function reduce() {
if (count > 0) {
document.getElementById('number').innerHTML = count;
count--;
} else {
clearInterval(repeat);
}
}
<html>
<head>
<title>Page 4</title>
</head>
<body>
<button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
<div style=" display: inline-block;" id="number"></div>
</body>
</html>
You could use a global variable repeat and reset if set when countdown is invoked.
var count,
repeat;
function countdown(){
count = 10;
if (repeat) {
clearInterval(repeat);
}
repeat = setInterval(reduce, 1000);
}
function reduce() {
if (count > 0) {
document.getElementById('number').innerHTML = count;
count--;
} else {
clearInterval(repeat);
}
}
<button style=" display: inline-block; " onclick ="countdown()" >Start Count Down</button>
<div style="display: inline-block;" id="number"></div>
You problem is the repeat variable, it's defined and accessible only inside countdown.
You could just make it global as well, and then you'd have to clear previous intervals when clicking the button again
var count, repeat;
function countdown() {
clearInterval(repeat);
count = 10;
repeat = setInterval(reduce, 1000);
}
function reduce() {
if (count > 0) {
document.getElementById('number').innerHTML = count;
count--;
} else {
clearInterval(repeat);
}
}
FIDDLE
put your repeat outside so the function reduce can access it
var count;
var repeat = null;
function countdown(){
count = 10;
repeat = setInterval(reduce, 1000);
}
function reduce() {
if(count > 0)
{document.getElementById('number').innerHTML = count;
count--;}
else
{clearInterval(repeat);}
}
You can also use this to stop interval;
clearInterval(this)
var count;
function countdown() {
count = 10;
var repeat = setInterval(reduce, 1000);
}
function reduce() {
if (count > 0) {
document.getElementById('number').innerHTML = count--;
} else {
clearInterval(this);
}
}
<button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
<div style=" display: inline-block;" id="number"></div>
This will solve your issue but will raise another issue. If you click multiple times, multiple events will be registered. For this, you should either disable button or define repeat in parent scope.
var count, repeat;
function countdown() {
count = 10;
repeat = repeat || setInterval(reduce, 1000);
}
function reduce() {
if (count > 0) {
document.getElementById('number').innerHTML = count--;
} else {
clearInterval(this);
}
}
<button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
<div style=" display: inline-block;" id="number"></div>
You will notice a simple trick:
repeat = repeat || setInterval(reduce, 1000);
This will ensure multiple intervals are not registered.
I am getting - Uncaught TypeError: Cannot read property 'style' of null
when I try to run the following:
<script type="text/javascript">
function startRotation() {
setInterval(resetAllDivs(), 20000);
}
function resetAllDivs(){
var i;
for(i=1; i<=15; i++) {
document.getElementById("img"+i).style.display = "none";
}
displayRandom();
}
function displayRandom(){
var n=Math.round(Math.random()*3)
document.getElementById("img"+n).style.display = "block";
document.getElementById("img"+n).style.width = "64%";
}
</script>
I am calling startRotation() above my closing using:
document.addEventListener('DOMContentLoaded',function(){startRotation()});
The error points to the line:
document.getElementById("img"+i).style.display = "none";
Any ideas?
A few things to note, some of them have be pointed out in the comments already, but I'll reiterate.
setInterval expects a function reference as its first parameter, you're passing in the return result of a call to resetAllDivs(), which is undefined. Really you've got
setInterval(undefined, 20000);
which won't work. You want
setInterval(resetAllDivs, 20000);
Next, this line will get you a random number between 0 - 3, which I don't think is what you were after. It's why you sometimes you'll try document.getElementById('img0'), which returns null.
Math.round(Math.random()*3)
Instead, this will get you a number between 1 - 15:
Math.floor((Math.random() * 15) + 1);
Here is a working example. Timing reduced to half a second instead of 20.
DEMO
function startRotation() {
resetAllDivs();
setInterval(resetAllDivs, 500);
}
function resetAllDivs(){
for (var i = 1; i <= 15; i++) {
document.getElementById("img" + i).style.display = "none";
}
displayRandom();
}
function displayRandom(){
var n = Math.floor((Math.random() * 15) + 1);
document.getElementById("img" + n).style.display = "block";
document.getElementById("img" + n).style.width = "64%";
}
startRotation();
div {
width: 50px;
height: 50px;
background-color: red;
}
div:nth-child(even) {
background-color: blue;
}
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
<div id="img7"></div>
<div id="img8"></div>
<div id="img9"></div>
<div id="img10"></div>
<div id="img11"></div>
<div id="img12"></div>
<div id="img13"></div>
<div id="img14"></div>
<div id="img15"></div>
This code could definitely be refactored into something smarter. I'd also advise using setTimeout over setInterval, as you gain more control.
One of your document.getElementById("img"+i) is returning a null value, wich means that the element doesn't exist or wasn't created before your resetAllDvis() functions runs.
You should use:
Math.floor((Math.random() * 15) + 1);
to return a random number between 1 and 15.
Make sure you have images with id's from id="img1" to id="img15".
I have this code:
jQuery/JavaScript
$(document).ready(function () {
function min() {
var number = parseInt($('span').html());
return number - 30;
}
function add() {
var number = parseInt($('span').html());
return number + 31;
}
$("#container").click(function () {
$('span').text(min());
});
$("#box").click(function () {
$('span').text(add());
});
var time = parseInt($('b').html());
if (time <= 0) {
alert("AAAAA");
};
});
CSS
#container{
background: #00ff00;
width: 500px;
height:500px;
}
#box{
background: black;
width: 100px;
height:100px;
color: white;
cursor: pointer;
}
HTML
<div id="container">
<span> 60 </span>
<div id="box"> </div>
</div>
when you click on you text in change for +31 and -30 so you will got 61 because default is 60 and but if you click on text in span will change for -30 only and it will display 30 i wish to alert when text in span reach 0 i made this but didn't work.
does any one know how to fix it?
I think that I'm not understanding completely to you. Maybe this the next link can help you.
You have some errors, check the solution.
$(document).ready(function(){
var $span = $('span');
function min() {
var number = parseInt($span.html());
return number - 30;
}
function add() {
var number = parseInt($span.html());
return number + 31;
}
$("#container").click(function(){
$('span').text(min());
checkTime();
});
$("#box").click(function(){
$('span').text(add());
checkTime();
});
function checkTime() {
debugger
var time = parseInt($span.html());
if (time <= 0) {
alert("AAAAA");
};
}
});
Please next time publish your problem in JSfiddle or similar.
I think you're selector to get the span is incorrect. You also need to execute the check after you decrement the value.
$(document).ready(function(){
function min() {
var number = parseInt($('span').html());
return number - 30;
}
function add() {
var number = parseInt($('span').html());
return number + 31;
}
$("#container").click(function(){
$('span').text(min());
CheckValue();
});
$("#box").click(function(){
$('span').text(add());
});
function CheckValue() {
var val = parseInt($('#container > span').html());
if (val <= 0) {
alert("AAAAA");
}
}
);