The function is working great but Im missing why my alert box wont trigger after the click.
<html>
<script type="text/javascript">
function getRNG(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function rollD20() {
document.getElementById("txtNumber").value = getRNG(1, 20);
}
if (txtNumber < 10) {
alert("Failure");
} else {
alert("Success");
}
</script>
<body>
<input type="text" disabled="disabled" size="2" id="txtNumber" />
<div id="output"></div>
<button onclick="rollD20();">Roll</button>
</body>
</html>
You have a closure issue. Should be:
<script type="text/javascript">
function getRNG(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function rollD20() {
document.getElementById("txtNumber").value = getRNG(1, 20);
if (txtNumber < 10) {
alert("Failure");
}
else {
alert("Success");
}
}
</script>
The change was moving the closing bracket for the rollD20 function to be below your if/else statement.
Also worth noting, I don't see anywhere that you set txtNumber.
Perhaps what you meant was:
function rollD20() {
var txtNumber = getRNG(1, 20);
document.getElementById("txtNumber").value = txtNumber;
if (txtNumber < 10) {
alert("Failure");
}
else {
alert("Success");
}
}
If so, this could be further reduced (if so desired) to simply:
function rollD20() {
var txtNumber = document.getElementById("txtNumber").value = getRNG(1, 20);
alert(txtNumber < 10 ? "Failure" : "Success");
}
Because you didn't put it into the rollD20 function, so the if-else logic run only once, when the page loaded. To trigger it on every click, you must put it in the click event handler, like this:
<html>
<script type="text/javascript">
function getRNG(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function rollD20() {
var txtNumber = document.getElementById("txtNumber").value = getRNG(1, 20);
if (txtNumber < 10) {
alert("Failure");
} else {
alert("Success");
}
}
</script>
<body>
<input type="text" disabled="disabled" size="2" id="txtNumber" />
<div id="output"></div>
<button onclick="rollD20();">Roll</button>
</body>
</html>
Also, I defined a variable named txtNumber.
well, the if...else logic is outside the function, but you probably want to store the result of getRND() in a variable too:
function rollD20() {
var result = getRNG(1, 20);
document.getElementById("txtNumber").value = result;
if (result < 10) {
alert("Failure");
}
else {
alert("Success");
}
}
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
Got some js animated dots that work fine as text,
var dots = 0;
$(document).ready(function()
{
setInterval (type, 600);
});
function type()
{
if(dots < 3)
{
$('#dots').append('.');
dots++;
}
else
{
$('#dots').html('');
dots = 0;
}
}
but can not use it in the VALUE attribute of my input button (after "processing").
<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'">
How to insert it in the right way?
http://jsfiddle.net/te58dadw/2/
in jQuery use .attr('value', '.....') or .val()
var dots = 0;
$(document).ready(function() {
$('#payDots').on('click', function() {
$(this).attr('disabled', 'disabled');
setInterval(type, 600);
})
});
function type() {
var dot = '.';
if(dots < 3) {
$('#payDots').val('processing' + dot.repeat(dots));
dots++;
}
else {
$('#payDots').val('processing');
dots = 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="payDots" type="button" value="Pay">
<input> element does not have .innerHTML property which is displayed. .append() and .html() set an elements' .innerHTML property, not .value property.
<input> element has .value property which can be set at jQuery using .val(function)
var dots = 0;
var dot = ".";
$(document).ready(function() {
setInterval(type, 600);
});
function type() {
if (dots < 3) {
$('input').val(function(i, val) {
return val + dot
});
dot.concat(".");
dots++;
} else {
$('input').val("Pay");
dots = 0;
dot = "."
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HERE IT WORKS
<div>processing<span id="dots"></span></div>
<BR>
<BR> HERE IT DOESN"T
<BR>
<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'">
You'd use jQuery's val() to set the value, and with a callback it's easy to append to the value.
A small plugin that handles this could be useful, something like
$.fn.dots = function(time, dots) {
return this.each(function(i,el) {
clearInterval( $(el).data('dots') );
if ( time !== 0 ) {
var d = 0;
$(el).data('dots', setInterval(function() {
$(el).val(function(_,v) {
if (d < dots) {
d++;
return v + '.';
} else {
d = 0;
return v.substring(0, v.length - dots)
}
})
}, time));
}
});
}
Which you'd call like
$('.elements').dots(600, 3);
and can be cancelled by just passing zero
$('.elements').dots(0);
Here's a demonstration showing how easy it is to use.
$.fn.dots = function(time, dots) {
return this.each(function(i,el) {
clearInterval( $(el).data('dots') );
if ( time !== 0 ) {
var d = 0;
$(el).data('dots', setInterval(function() {
$(el).val(function(_,v) {
if (d < dots) {
d++;
return v + '.';
} else {
d = 0;
return v.substring(0, v.length - dots)
}
})
}, time));
}
});
}
$(document).ready(function() {
$('#dots').on('click', function() {
$(this).val('Proccessing').prop('disabled',true).dots(600, 3);
$('#cancel').show();
});
$('#cancel').on('click', function() {
$(this).dots(200, 10);
$('#dots').dots(0);
setTimeout(function() {
$('#dots').prop('disabled', false).val('Pay');
$('#cancel').hide().dots(0);
},2000);
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dots" type="button" value="Pay" />
<br /><br />
<input id="cancel" type="button" value="Cancel dots" />
I was builiding lately life counter and i can't figure out what the issue around here, I mean i got 2 divs, when you on div with class "alive" you get score up and when you in "dead" div you get score down.
Now I've made this code that work on seconds, but it not working stright, I mean 1, 2, 3. But it working like this: http://jsfiddle.net/4Tby5/
Or as visual code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Alive - Dead</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var l = 1;
var good = " Excelent!";
var bad = " OH NO!";
$(document).ready(function () {
$('#alive').hover(function () {
if (l > 100) {
window.clearTimeout("tim");
}
else {
document.getElementById("percent").innerHTML = "Life: " + l + good;
l++;
var tim = window.setTimeout("count()", 1000);
}
count();
});
});
$(document).ready(function () {
$('#dead').hover(function () {
if (l < 0) {
window.clearTimeout("tim");
}
else {
document.getElementById("percent").innerHTML = "Life: " + l + bad;
l--;
var tim = window.setTimeout("count()", 1000);
}
count();
});
});
</script>
<style>
body {
background: red;
}
.dead {
cursor: url(thumb-down.cur) 6 6, auto;
padding-bottom: 285px;
}
.alive {
background: #32ff0a;
height: 300px;
margin: -8px;
cursor: url(thumb-up.cur) 6 6, auto;
}
</style>
</head>
<body>
<div class="alive" id="alive">
Stay here to survive!
</div>
<div class="dead" id="dead">
<br />
Stay away from dead area!
</div>
<div id="percent"></div>
</body>
</html>
So my question is how can i fix this to get it 1,2,3 (replace 1 with 2 and 3, 4...)?
You do not have a count function, make one
And you clear a timeout using the variable itself not its name
window.clearTimeout(tim);
also with your current code you will need to use a global variable
window.tim = window.setTimeout("count()", 1000);
window.clearTimeout(window.tim);
otherwise the clearTimeout wont see it.
Here is solution to your problem.
Problem in your code is... Hover function is calulated only when Mouse enters... Not as long as mouse remains inside.
http://jsfiddle.net/Vdq39/2/
$(document).ready(function () {
var good = " Excelent!";
var bad = " OH NO!";
var tim;
var counter = 0;
function count() {
counter++;
document.getElementById("percent").innerHTML = "Life: " + counter + good;
if (counter > 100) {
window.clearInterval(tim);
}
}
function countDown() {
counter--;
document.getElementById("percent").innerHTML = "Life: " + counter + bad;
if (counter < 0) {
window.clearInterval(tim);
}
}
$('#alive').hover(function () {
if (counter > 100) {
window.clearInterval(tim);
} else {
tim = window.setInterval(count, 1000);
}
}, function () {
window.clearInterval(tim);
});
$('#dead').hover(function () {
if (counter < 0) {
window.clearInterval(tim);
} else {
tim = window.setInterval(countDown, 1000);
}
},
function () {
window.clearInterval(tim);
});
});
<script language="JavaScript" type="text/javascript">
var theBar = createProgressBar(document.getElementById('progress-bar'));
var value;
function resetValue() {
value = 0;
}
function showProgress() {
value += 1;
theBar.setValue(value);
if (value < 100) {
window.setTimeout(showProgress, 100);
}
if (value = 100) {
window.location = 'http://google.com';
}
}
window.onload=resetValue();showProgress();
</script>
I'm trying to redirect after the timer reaches 10 sec, but what I tried doesn`t seem to work (redirects instantly).
not familiar with JS one bit, tried my best to mimick
= means assignment
if (value == 100) { ...
I have this JavaScript code:
<script type="text/javascript">
function timeMsg() {
var t=setTimeout("doRedirect()",10000);
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
timeMsg();
</script>
But I want to show how much time is left in a box that floats at the top right, and with my l;ittle knowledge of JavaScript i have no idea where to start :(
Can someone help me?
(function(count) {
setInterval(function() {
if( count === 0) {
window.location.href = "http://www.codemeh.com/";
}
else {
document.getElementById('box_that_floats_top_right').innerHTML = 'Timeleft: ' + (count / 1000);
count -= 1000;
}
}, 1000);
}(10000));
Demo: http://www.jsfiddle.net/4yUqL/77/
A quick solution for you:
<input id="box" type="text" size="8" />
<script>
//Init vars
var milsec=0;
var sec=30;
var box = document.getElementById("box");
function display() {
if (milsec <= 0){
milsec=9;
sec-=1;
}
if (sec <= -1){
milsec=0 ;
sec+=1;
} else {
milsec-=1 ;
box.value = sec + "." + milsec;
//call function display after 100ms
setTimeout(function() {display();},100);
}
}
display();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
timeLeft = 10;
function timeMsg() {
if(--timeLeft == 0) {
doRedirect();
} else {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
}
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
$(document).ready(function() {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
});
</script>
<input id="time" size="5"></input>