I have a piece of code that counts from 0 to a specified number with a specified delay.
The problem is that it adds by 1 and I want it to add by 0.01
How to do it? the code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<style>body{font:11px verdana;color:#555;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var max = 20;// set with php
$(incCounter);
function incCounter() {
var currCount = parseInt($('.counter').html());
$('.counter').text(currCount+1);
if (currCount+1 != max) {
setTimeout(incCounter,50);
}
}
</script>
</head>
<body>
<div class="counter">0</div>
</body>
</html>
I haven't tested this, but try...
function incCounter() {
var currCount = parseFloat($('.counter').html());
currCount += .01;
$('.counter').text( currCount.toFixed(2) );
if (currCount < max)
setTimeout(incCounter,50);
}
JS Fiddle to play with.
Related
I have been trying to make a simple html page that returns a different animation (stored in different HTML documents, although this can be changed I thought it was best for cleanliness) based on the return of variable "response". I have been having issues with this simple script to return my desired results, and I havent found many relevant results online (inb4 LMGTFY). I know that the response variable is being created as desired as it was printing the number chosen, athough now it seems intermittent as to when it likes to print.
Does anyone have advice on an effective way to script this?
Cheers,
Matt
(current HTML is as follows, I havent implemented any CSS or external scripts otherwise)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fielder's Choice Spinner</title>
<meta name="description" content="Instore spinner for FC">
<meta name="author" content="Matthew Davis">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ill just leave this here-->
<script language="JavaScript">
var response = (function getRandomIntInclusive(min, max) {
min = Math.ceil(1);
max = Math.floor(1000);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
})();
document.write(response)
if (response > 900) {
window.location.replace("win.html")
}
if (response < 900){
window.location.replace("lose.html")
}
</script>
</head>
<body>
</body>
</html>
Use the hashtag. It used to be a secret character for programmers before Twitter adopted it.
example: if you redirect to "win.html#756", then win.html can read that number, with window.location.hash
To remove the hash sign itself you can use .substr(1)
index.html (I changed it a little, take away what you want)
<script language="JavaScript">
window.onload = function() {
var response = function getRandomIntInclusive(min, max) {
min = Math.ceil(1);
max = Math.floor(1000);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
};
var myresponse = response();
if (myresponse > 900) {
window.location.replace("win.html#" + myresponse);
}
if (myresponse < 900) {
window.location.replace("lose.html#" + myresponse);
}
}
</script>
win.html (dito for lose.html, except the message)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fielder's Choice Spinner - WIN</title>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="JavaScript">
window.onload = function() {
var myresponse = window.location.hash.substr(1);
document.getElementById('data').innerHTML = myresponse;
}
</script>
<style>#data { color: red; font-size: 18px;}</style>
</head>
<body>
<div id="main">YOU WON --- Your score is: <span id="data"></span></div>
</body>
</html>
I have five jpg pictures and on a homepage i want to choose between these five pics by typing 1,2,3,4 or 5 and click OK and then i want that picture to show.
My code looks like this:
var inputElem, msgElem;
function init() {
msgElem = document.getElementById("message");
inputElem = [];
inputElem[1] = document.getElementById("input1");
inputElem[2] = document.getElementById("input2");
inputElem[3] = document.getElementById("input3");
document.getElementById("btn1").onclick = showFruit;
}
window.onload = init;
function showFruit() {
var nr, fruitUrl;
fruitUrl = (fruitImg.src = "pics/fruit" + nr + ".jpg");
nr = Number(input1.value);
fruitImg.src = "pics/fruit" + nr + ".jpg";
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
The problem is that I can't change the picture.I don't know whats missing, or how to make it choose between pic 1-5.
I have no privilege to write comments, so can't estimate what you actually want. But the resulting effect may be the thing you want.
But have look up below examples (live here). Enter a number then click button.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp">
<input type="submit" id="btn1" onclick="showFruit('inp')">
<script type="text/javascript">
makeImageFromNum = function (n) {
var nr = document.getElementById(n).value;
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
In below example (live here) just change the number - no need to click a button, there is no any actually :)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp" onchange="showFruit(this.value)">
<script type="text/javascript">
makeImageFromNum = function (nr) {
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
Note that you're always assinging the first image in this line of code (the last Iine if your code)
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
So, you'll always see image one
When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated.
Thank you for the help.
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
try this
1.) Specify globallythis variable
var currentpic=0;
2.) Change in images.lenth to images.length
3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
var currentpic=0;
function nextslide(){
var images = new Array()
images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg"
images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"
var lastpic= images.length-1;
if (currentpic ==lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
My task for my Javascript class is to create a script for this page that changes the image every 3 seconds. I think my code is correct, however Firebug tells me "document.getElementByID is not a function." Can someone show me what I am doing incorrectly?
This is my JS script.
<script type="text/javascript">
var i = 0
var lightArray = ["pumpkinOff.gif", "pumpkinOn.gif"]
var currentLight = document.getElementByID('light')
// ChangeLight Method Prototype
function changeLight() {
currentLight.src = lightArray[i++];
if (i == lightArray.length) {
i = 0;
}
}
setInterval(changeLight, 3000)
</script>
Here is my edited HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for Programmers</title>
</head>
<body>
<h2>Happy Halloween!</h2>
<img id="pumpkin" src="pumpkinoff.gif" alt="pumpkin">
<script src="../Script/spooky.js"></script>
</body>
</html>
Incorrect capitalisation on
var currentLight = document.getElementByID('light')
Should be:
var currentLight = document.getElementById('pumpkin')
I have attached a working fiddle:
http://jsfiddle.net/11csf4k2/
It's a typo it should be:
var currentLight = document.getElementById('light'); //Not ID
It should be Id not ID:
document.getElementById('light');
Also note that you don't have element with id light on your page. It probably should be
document.getElementById('pumpkin');
I am trying to find a method to have a single letter change every 5 seconds. I have the random part done but cannot work out how to change it every 5 seconds. Here is what I have put together so far, I am hoping someone can tell me where I am going wrong.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function randomString(Length)
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for( var i=0; i < Length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function ChangingRandomString(Length)
{
setInterval(function(){
return randomString(Length);
},5000);
}
</script>
</head>
<body>
<div id="wrap">
<p>Random Changing Letter : <script type="text/javascript">ChangingRandomString(1);</script></p>
<p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
</div>
</body>
</html>
In the ideal world I am looking to also make the changing letter fade in and out as well for those who like a challenge :-)
Thanks in advance for any help.
My suggestion:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function randomString(Length)
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for( var i=0; i < Length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function ChangingRandomString(Length)
{
setInterval(function(){
document.getElementById("random").innerHTML = randomString(Length);
},5000);
}
</script>
</head>
<body>
<div id="wrap">
<p>Random Changing Letter : <span id="random"></span></p>
<p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
</div>
</body>
<script>ChangingRandomString(1)</script>
</html>
Your code wasn't working because you weren't writing anywhere just calling ChangingRandomString. It simply returned something, but it wasn't being written.
This way, I used a span, that is rewritten every 5 seconds, and called the script in the end of the body tag.
For the fade thing, I really suggest you to use jQuery that facilitates that kind of things. You can also take a look here.