I am making the button activate the function to change the color to a random color, but when it's green, i want the button to stop changing the color.
<html>
<head>
<script type="text/javascript">
function roll1() {
rand = Math.ceil(Math.random() * 6);
die = document.getElementById("die1");
if (rand >= 1 && rand <= 3) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 4 || rand == 5) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 6) {
die.innerHTML = "<p>'RED'<\/p>"
}
}
</script>
</head>
<body>
<button onclick="roll1()">Roll Dice</button>
<table>
<tr>
<td style="width:55px; height:55px;">
<p id="die1">'YELLOW'</p></td>
</tr>
</table>
</body>
</html>
i also don't want the button to disappear, because it still needs to do something else that is not in this code.
var stop_flag = false;
function roll1() {
if (stop_flag)
return false;
rand = Math.ceil(Math.random() * 6);
die = document.getElementById("die1");
if (rand >= 1 && rand <= 3) {
stop_flag = true;
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 4 || rand == 5) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 6) {
die.innerHTML = "<p>'RED'<\/p>"
}
}
You could add the attribute disabled, so the button is no longer clickable.
Related
This question already has answers here:
Why does generating a random number outside of a loop, causes it to be always the same?
(2 answers)
Why is the content not showing after refresh
(2 answers)
Can we have code after location.reload(true)?
(3 answers)
Closed 4 months ago.
I am trying to build a random question generator for a card game that my 7 year old son and I like to play. Basically, what I’m trying to get is so that every time you click on the button, a new question will generate in the text area above. I have it so that the random questions are appearing in the console.log, they just aren’t appearing in the text area.
Here is the code that I have so far:
var generateBtn = document.querySelector("#generate");
let randomNumber = Math.floor(Math.random() * 8);
let worldQuestion = '';
if (randomNumber == 0) {
worldQuestion = 'Highest Point';
} else if (randomNumber == 1) {
worldQuestion = 'Lowest Point';
} else if (randomNumber == 2) {
worldQuestion = 'Highest Population';
} else if (randomNumber == 3) {
worldQuestion = 'Lowest Population';
} else if (randomNumber == 4) {
worldQuestion = 'Most Neighboring Countries';
} else if (randomNumber == 5) {
worldQuestion = 'Least Neighboring Countries';
} else if (randomNumber == 6) {
worldQuestion = 'Biggest Area';
} else if (randomNumber == 7) {
worldQuestion = 'Smallest Area';
}
function writeQuestion() {
var passwordText = document.querySelector("#password");
passwordText.value = worldQuestion;
}
generateBtn.addEventListener("click", writeQuestion);
<div class="wrapper">
<div class="card">
<div class="card-header">
<h2>Generate a World Question</h2>
</div>
<div class="card-body">
<textarea readonly id="password" aria-label="Generated World Question"></textarea>
</div>
<div class="card-footer">
<button id="generate" class="btn" onClick="window.location.reload()" type="button">Generate World Question</button>
</div>
</div>
</div>
If you want worldQuestion to be calculated every time the button is pressed, you need to do the calculation inside the event listener. Like this:
var generateBtn = document.querySelector("#generate");
function writeQuestion() {
let randomNumber = Math.floor(Math.random() * 8);
let worldQuestion = '';
if (randomNumber == 0) {
worldQuestion = 'Highest Point';
} else if (randomNumber == 1) {
worldQuestion = 'Lowest Point';
} else if (randomNumber == 2) {
worldQuestion = 'Highest Population';
} else if (randomNumber == 3) {
worldQuestion = 'Lowest Population';
} else if (randomNumber == 4) {
worldQuestion = 'Most Neighboring Countries';
} else if (randomNumber == 5) {
worldQuestion = 'Least Neighboring Countries';
} else if (randomNumber == 6) {
worldQuestion = 'Biggest Area';
} else if (randomNumber == 7) {
worldQuestion = 'Smallest Area';
}
var passwordText = document.querySelector("#password");
passwordText.value = worldQuestion;
}
generateBtn.addEventListener("click", writeQuestion);
<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>
Also, you do not need to use a large if-statement here. You store all the possible questions in an array, then choose an index at random. Like this:
var generateBtn = document.querySelector("#generate");
function writeQuestion() {
let randomNumber = Math.floor(Math.random() * 8);
questions = ['Highest Point', 'Lowest Point', 'Highest Population',
'Lowest Population', 'Most Neighboring Countries',
'Least Neighboring Countries', 'Biggest Area', 'Smallest Area']
var passwordText = document.querySelector("#password");
passwordText.value = questions[randomNumber];
}
generateBtn.addEventListener("click", writeQuestion);
<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>
I got a game where you are supposed to catch the burglar.
The problem I have is that the alertbox "Too bad, the burglar got away with your money!" comes too fast when one click the startthegame-button.
How do I do to get the alertbox to alert only after that the game has started and 10 seconds have passed?
I want the game to run only one time. So after the game has ended the person playing has to refresh the page to be able to start playing again.
Any help is much appreciated!
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title> BURGLAR-STOPPING </title>
<style>
#burglar {
position: absolute;
top: 150px;
left: 60px;
}
</style>
</head>
<body>
<h1>Get the burglar! </h1>
<h3> You have only 10 seconds before the burglar runs away with all your money! </h3>
<div id="burglar" onclick="stopIt();"> BURGLAR </div>
<input type="button" value="Start the game" onclick="startthegame();time();">
<script>
var x = 150;
var y = 300;
var course = "right";
var randomUp = Math.floor(Math.random() * 166);
var t = function startthegame() {
setInterval(moveMe, 0);
}
function stopIt() {
clearInterval(t);
alert("Yes, You got the burglar!");
}
function moveMe() {
if (course == "right") {
x = x + 2;
} else if (course == "left") {
x = x - 2;
} else if (course == "down") {
y = y + 1;
} else if (course == "up") {
y = y - 1;
}
document.getElementById("burglar").style.left = x + "px";
document.getElementById("burglar").style.top = y + "px";
if (x == 1050 && course == "right") {
course = "down";
} else if (y == 500 && course == "down") {
course = "left";
} else if (x == 150 && course == "left") {
course = "up";
} else if (y == randomUp && course == "up") {
course = "right";
}
}
function startthegame() {
setInterval(moveMe, 0);
}
function time() {
setTimeout(time, 10000);
alert("Too bad, the burglar got away with your money!");
}
</script>
</body></html>
Your code is creating a timeout to call itself and it then alerts the string. It is NOT making the alert at 10 sconds.
function time() {
setTimeout(time, 10000);
alert("Too bad, the burglar got away with your money!");
}
should be
var endTimer;
function time() {
endTimer = setTimeout(function () { alert("Too bad, the burglar got away with your money!"); }, 10000);
}
Now you are trying to cancel the timeout, but the t is a reference to the function, not the interval
var t = function startthegame() {
setInterval(moveMe, 0);
}
should be
var t;
function startthegame() {
t = setInterval(moveMe, 0);
}
And for some reason you defined startthegame twice.
so we have
var x = 150;
var y = 300;
var course = "right";
var randomUp = Math.floor(Math.random() * 166);
var hasRun = false;
var moveTimer;
function startthegame() {
if (hasRun) return;
hasRun = true;
moveTimer = setInterval(moveMe, 1);
}
function stopTimers () {
if (moveTimer) clearInterval(moveTimer);
if (endTimer) clearTimeout(endTimer);
}
function stopIt() {
stopTimers();
alert("Yes, You got the burglar!");
}
function moveMe() {
if (course == "right") {
x = x + 2;
} else if (course == "left") {
x = x - 2;
} else if (course == "down") {
y = y + 1;
} else if (course == "up") {
y = y - 1;
}
document.getElementById("burglar").style.left = x + "px";
document.getElementById("burglar").style.top = y + "px";
if (x == 1050 && course == "right") {
course = "down";
} else if (y == 500 && course == "down") {
course = "left";
} else if (x == 150 && course == "left") {
course = "up";
} else if (y == randomUp && course == "up") {
course = "right";
}
}
var endTimer
function time() {
endTimer = setTimeout(function() {
alert("Too bad, the burglar got away with your money!");
stopTimers();
}, 10000);
}
<html lang="sv">
<head>
<meta charset="utf-8">
<title> BURGLAR-STOPPING </title>
<style>
#burglar {
position: absolute;
top: 150px;
left: 60px;
}
</style>
</head>
<body>
<h1>Get the burglar! </h1>
<h3> You have only 10 seconds before the burglar runs away with all your money! </h3>
<div id="burglar" onclick="stopIt();"> BURGLAR </div>
<input type="button" value="Start the game" onclick="startthegame();time();">
</body>
</html>
I am trying to code the infamous FizzBuzz program in multiple languages and I am stumped on JavaScript. I am trying to call the function from a button but it doesn't work, and even when I try to call the function normally the same happens. I've tried multiple different methods of outputting and it made no difference so hopefully someone can show me what im doing wrong. Here's the code:
<!DOCTYPE html>
<html>
<body>
<div class="center">
<h1>This is FizzBuzz</h1>
<button onclick="fizzBuzz()">Run FizzBuzz</button>
<p id="hi">Hi there</p>
</div>
<style>
.center {
text-align: center;
font-family:Arial;
}
</style>
<script> //JavaScript
var idd = document.getElementById("hi");
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x = 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3)= 0){
idd.innerHTML = "Fizz";
} else if((x % 5) = 0){
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
fizzBuzz();
</script>
</body>
</html>
x = 15 will never evaluate to false, meaning the loop will go on forever. Try changing it to x < 15.
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x < 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3) == 0){
idd.innerHTML = "Fizz";
} else if((x % 5) == 0){
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
You will also need to use == instead of = for comparisons for it to work, as in (x % 3) == 0.
<!DOCTYPE html>
<html>
<body>
<div class="center">
<h1>This is FizzBuzz</h1>
<button onclick="fizzBuzz()">Run FizzBuzz</button>
<p id="hi">Hi there</p>
</div>
<style>
.center {
text-align: center;
font-family:Arial;
}
</style>
<script> //JavaScript
var idd = document.getElementById("hi");
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x < 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3)== 0){<!--here '=='-->
idd.innerHTML = "Fizz";
} else if((x % 5) == 0){<!--here '=='-->
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
fizzBuzz();
</script>
</body>
</html>
I have this problem: whenever I click on the div, I want to add background color. Forever. But background changes even if I click more (like a loop). How to set background color forever?
const blocks = document.querySelectorAll('.game div');
const liveNumber = document.querySelector('.lives-num');
let lives = 1;
function letTheGameBegin(e, r) {
const rand = Math.floor(Math.random() * 100);
if (rand < 40) {
e.target.style.backgroundColor = 'green';
} else if (rand < 60) {
e.target.style.backgroundColor = 'yellow';
lives++;
} else if (rand < 90) {
e.target.style.backgroundColor = 'red';
lives--;
} else {
e.target.style.backgroundColor = 'white';
}
liveNumber.innerHTML = lives;
if (lives === 0) {
//document.querySelector('.game-over').style.display = 'flex';
}
}
blocks.forEach(block => block.addEventListener('click', letTheGameBegin));
I think you mean you only want to run the JS once per div.
Try this example and see if its what you need: jsfiddle
function letTheGameBegin(e, r) {
const rand = Math.floor(Math.random() * 100);
if(!e.target.style.backgroundColor){
if (rand < 40) {
e.target.style.backgroundColor = 'green';
} else if (rand < 60) {
e.target.style.backgroundColor = 'yellow';
lives++;
} else if (rand < 90) {
e.target.style.backgroundColor = 'red';
lives--;
} else {
e.target.style.backgroundColor = 'white';
}
liveNumber.innerHTML = lives;
if (lives === 0) {
//document.querySelector('.game-over').style.display = 'flex';
}
}
}
So I have a button with onclick that runs 3 functions and each function is to display a random symbol. So when I press the button, it should output 3 random symbols, but only one symbol it outputted when I click the button.
<!DOCTYPE html>
<html>
<head>
<title>MyFirstJavaScript</title>
</head>
<body>
<script>
function slots1()
{
var slot1 = Math.floor(Math.random()*4);
if (slot1 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot1 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot1 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot1 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
function slots2()
{
var slot2 = Math.floor(Math.random()*4);
if (slot2 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot2 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot2 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot2 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
function slots3()
{
var slot3 = Math.floor(Math.random()*4);
if (slot3 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot3 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot3 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot3 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
</script>
<button type="button" value="Spin" name="SPIN" onClick="slots1();slots2();slots3();">Spin</button>
<span id="value"></span>
</body>
</html>
Each function basically overrides the value that's changed by the previous one, so the only value you see is the result of slots3(). This following line is common to all your functions and it's your override:
document.getElementById('value').innerHTML = //some value;