I have a simple animation I found online and modified to fit my needs, but no matter what I try, I cannot get it to redirect after the animation is done. If I remove the setTimeout It redirects immediately without showing the animation. This is my code:
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(myFunction, 1000);
location.redirect("home.html") //doesn't work
}
</script>
</html>
I'm still getting used to javascript so a full explanation would be much appreciated. Thank you.
this code snippet works for me...
first as suggested use window.location.replace instead of location.redirect which does not seem to be supported
second myFunction does not seem to be defined.. you didn't specify if it does anything so if you just want to delay - I put null instead
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(null, 1000);
window.location.replace("http://stackoverflow.com")
}
</script>
</html>
you need something how this ,is not need use Jquery :
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://example.com");
// similar behavior as clicking on a link
window.location.href = "http://example.com";
more imformation :here
you code with the soluction :
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(myFunction, 1000);
//location.redirect("home.html") //doesn't work
window.location.href = "http://example.com";
}
</script>
</html>
Related
Over the recent days 've been trying to make buttons that changes a text's color by using
document.querySelector.('class name').style.color
in a function while using onclick to put that function in the button, but it always says my function *chanageColor isn't defined. Could some of you help me please? It also says theres an unexpected token, please help me with that as well!
<body>
<div class="box">
<h1> Hello</h1>
</div>
<script>
function changeColor(){
document.querySelector.('.box').style.color = 'pink';
}
</script>
<button class="pink">Pink</button>
</body>
</html>
Well, there's nothing in your code here that would even try to call your function so I can't say for sure what your issue is, but to hook up the click event of the button to your function, you use: .addEventListener().
Now, you do have a typo:
document.querySelector.('.box') // <-- The dot before ( is wrong
And your script element should be the last thing before you close the body tag so that by the time the script runs, all the HTML will have been parsed into memory.
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink">Pink</button>
<script>
document.querySelector("button.pink").addEventListener("click", changeColor);
function changeColor(){
document.querySelector('.box').style.color = 'pink';
}
</script>
And while this works, inline styles should be avoided whenever possible because they are the hardest type of CSS styling to override and lead to duplication of code. Instead, use CSS classes whenever you can (almost always) as shown here:
.pinkText { color:pink; }
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink">Pink</button>
<script>
// Get your DOM element references just once, not every time the function runs:
const box = document.querySelector('.box');
document.querySelector("button.pink").addEventListener("click", changeColor);
function changeColor(){
box.classList.add('pinkText');
}
</script>
<!DOCTYPE html>
<html>
<body>
<div class="box">
<h1> Hello</h1>
</div>
<button class="pink" onclick="changeColor()">Pink</button>
</body>
<script>
function changeColor(){
document.querySelector('.box h1').style.color = 'pink';
}
</script>
</html>
I have the following Javascript code which should rapidly switch between two images:
<head runat="server">
<title>Home Page</title>
<script src="Resources/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function changeImage()
{
requestAnimationFrame(changeImage);
var url = document.getElementById('Change_Image').src;
if (url == 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
else
{
if (url == 'Resources/Share2.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share1.bmp';
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Welcome to my Website</h1>
<h2>Below you can find an example of visual cryptography</h2>
<br />
<br />
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
</div>
</form>
</body>
</html>
Unfortunately, the code does not work and the image does not change to another one. What am I doing wrong? I am quite new to JavaScript so bear with me please?
You are using assign operator instead of comparison operator. Also use else if or just else in the second condition.
Change to
if (url == 'Resources/Share1.bmp')
and
else if (url == 'Resources/Share2.bmp')
and it should work.
See this DEMO to help you with. It toggles the image with 2 seconds interval
Your logic seems to be flawed. Look at this piece of code
var url = document.getElementById('Change_Image').src;
if (url = 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
And your markup is
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
The value of url will always be Resources/Share1.bmp. Also as the other posters mentioned equality is == and not =
I see jquery is included, maybe mvc appliction?
You can make use of jquery toggle:
http://api.jquery.com/toggle/
your html:
<div class="someContainer">
<img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" />
<img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B" style="display:none"/>
</div>
your javascript:
$(".someContainer").find(".Change_Image").toggle();
You want some effects
$(".someContainer").find(".Change_Image").toggle("slow");
This is very frustrating as it seems so simple yet is not working.
In my body I have
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<inputtype="button" value="Start" onClick="splash();" />
</div>`
And in my head, within script tags I have
function splash() {
var divSplash = document.getElementById("splashscreen");
divSplash.style.display = "none";
}
Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?
The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.
I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.
<script type="text/javascript">
function startGame() {
var divSplash = document.getElementById("splash");
divSplash.style.display = "none";
}
</script>
Also, the language property is now obsolete.
Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').
When I fix the typo, it works.
You're not using the same id :)
spashscreen != splashscreen
Here is the answer in a jsfiddle
HTML:
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<button onclick="splash()">Start</button>
</div>
Javascript:
function splash() {
var divSplash = document.getElementById('splashscreen');
divSplash.style.display = "none";
}
This is a link to the working jsfiddle http://jsfiddle.net/akshaytyagi/SD66b/
and following is the code that I am trying to run on my website ( same as the one jsFiddle )
I have tried on two computers. What am I doing wrong?
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tips = [
"creative",
"innovative",
"awesome",
"amazing",
"social"
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3 *1000);
});
</script>
</head>
<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body>
</html>
You need to put the script which access DOM element in $(document).ready to make sure the elements are ready before they are accessed.
$(document).ready(function(){
})
Edit based on comments
Change
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
To
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2jquery.min.js"></script>
I copy and pasted your HTML, and after }, 3 * 1000); there is a special char.
Delete that whole line (}, 3 * 1000);) and re-type it.
See:
As andyb has commented, if you're loading the file locally your jquery url wont work. You can either change it to http:// or upload your file somewhere.
Although the right answer was already given, I've taken the liberty to fix your markup.
And may I suggest you use proper CSS instead on inline styling? It makes your code much more readable and separates markup and design as you should,
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var tips = [
'creative',
'innovative',
'awesome',
'amazing',
'social'
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3000);
</script>
</head><body>
<div style="background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">
The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body></html>
The problem making it work, locally, was that // links do not get resolved to http:// ( src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js instead of just src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")
[ Thanks to #andyb : I was wondering why Google had improper code on their site. ]
Here is my code:
<html>
<head>
<title>My Game Title Goes Here!</title>
<script type="text/javascript">
function startGame(){
document.getElementById("2").innerHTML = ('Testing!');
}
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
</script>
</head>
<body>
<div class="title" name="Game Title" id="0">Game Title</div>
<div tabindex="0" class="gamecontainer" name="Game Container" id="1">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
</body>
</html>
I doesn't work like I expect it to (I'm using Google Chrome).
It only works if I run it directly, like this:
<div tabindex="0" class="gamecontainer" name="Game Container" id="1" onkeypress="document.getElementById('2').innerHTML = ('Testing!')">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
I checked over my code tons of times and i cannot find any clear mistakes like typos or anything. If that is the problem then I am sorry to have wasted your time but this is realy buggin' me.
Element IDs can't start with a number, it's almost definitely contributing to your issue here. Change the IDs in both the HTML and JS to begin with a letter.
Second of all, the keyListener line should probably be something like this:
window.onload = function(){
document.getElementById("newId").onkeypress = startGame;
}
document.body doesn't have an onload property. It should be window.onload instead.
window.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
DEMO: http://jsfiddle.net/9khng/
Change :
document.body.onload = keyListener(){
document.getElementById("1").onkeypress = startGame;
}
To:
document.body.onload = function(){
document.getElementById("1").onkeypress = startGame;
}
And, id shouldn't begin with a number as it's an invalid HTML.
Chrome seems to overcome this mistake, but it shouldn't be used.
And move the code to the the <body> tag or use window.onload
document.body doesn't exist above the <body>.
I think IDs can't start with a number.
Try fixing your "onkeypress" attribute. Your quotes are messed up.
onkeypress="document.getElementById('2').innerHTML = ('Testing!')"