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!')"
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 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>
I'm trying to hide or display html codes based on javascript if statement.
It's not working. You can see a fiddle here: https://jsfiddle.net/ajhv0pLj/
<script type="text/javascript">
if (window.localStorage.getItem("deflang") === null) {
alert (window.localStorage.getItem("deflang"));
document.getElementById('homepage').style.display = 'none';
}
</script>
<div id="homepage">
Hello world
</div>
The code is working, you don't have to put the script tag around your javascript in jsfiddle, that's what's throwing the error.
i found the solution, i had to put the script before the body tag close. Or just after my div declaration.
Basically, this worked:
<div id="homepage">
Hello world
</div>
<script type="text/javascript">
if (window.localStorage.getItem("deflang") === null) {
alert (window.localStorage.getItem("deflang"));
document.getElementById('homepage').style.display = 'none';
}
</script>
I've been playing around with javascript and I am trying to get the below to work.
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
</script>
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" hidden="true">Are You sure? | Yes / <a>No</a> </span>
On click, I am trying to make the hidden element get shown. I am unsure why it isn't working, the logic seems right to me.
Cheers
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display="block";
}
block is undefined, "block" isn't
You are using hidden html5 property which has limited browser compatibility as of now. Try to hide it initially by using css property visibilty:hidden which you change via your function's onclick event.
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" style="visibility:hidden;">Are You sure? | Yes / <a>No</a> </span>
I hope this will help you out
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.display = 'block';
}
</script>
Remove
<span id="id1" style="display: none;">Are You sure? | Yes / <a>No</a> </span>
Let me know.
Regards.
Only one point:
In <script> tag, all of words without quote is a reserved word or variable.So your code
document.getElementById(a).style.display=block;
Should be:
document.getElementById(a).style.display='block';
Becase block is a attribute of display, not the others.
You are using the hidden attribute.
So use this code instead:
function unhide(a){
document.getElementById(a).removeAttribute('hidden');
}
Try this:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
$("#id1").hide();
};
$("#unhide").click(function(){
$("#id1").show();
});
</script>
<a id="unhide"><span> Remove</span></a>
<span id="id1">Are You sure? | Yes / <a>No</a> </span>
I hope this help you, please leave a comment if it's worked or not.
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";
}