Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm pretty sure logic is fine, but for some other reason, when I click on the image, it doesn't change. All of the images are in the same directory, and I could load lightOn.png image, but can not change it.
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
if (document.getElementById("myimg").src == "lightOn.png") {
document.getElementById("myimg").src = "lightOff.png";
}
else {
document.getElementById("myimg").src = "lightOn.png";
}
}
</script>
<img id="myimg" onclick="changeImage()" src="lightOn.png">
<p>Turn on/off the light</p>
</body>
</html>
The only problem that seems to exist is that the img src is not correct, make sure path to your image is correct. I changed the path and it works http://jsfiddle.net/Y4yCb/
<body>
<script>
function changeImage() {
if (document.getElementById("myimg").src == "http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg") {
document.getElementById("myimg").src = "http://solar.calfinder.com/assets/blog/images/energy-light-off.jpg";
}
else {
document.getElementById("myimg").src = "http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg";
}
}
</script>
<img id="myimg" onclick="changeImage()" src="http://www.freeimageslive.com/galleries/light/pics/light00002g.jpg">
<p>Turn on/off the light</p>
</body>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I know I'm a beginner at this, but I really need to learn the rules. I'm trying to make a simple example of javascript. Its a box with three buttons, but for some reason only one of them works. They do have different ID types, so there must be another rule I don't know.
<!DOCTYPE html>
<html>
<head>
<title>Javascript box</title>
</head>
<body>
<p>Press buttons to change the box</p>
<div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>
<br>
<button id="less">less</button>
<button id="more">more</button>
<button id="none">Reset</button>
<script type="text/javascript">
document.getElementById("less").addEventListener("click", function(){
document.getElementById("box").style.height = "25px";
});
document.getElementByID("more").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
});
document.getElementById("none").addEventListener("click", function(){
document.getElementById("box").style.height = "100px";
});
</script>
</body>
</html>
For the second addEventListener, there's a typo.
In document.getElementByID, the D should not be capitalised.
A good way to debug these issues is to look at the console in developer tools.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have this code:
<img src="http://www.w3schools.com/html/html5.gif" id="imgid">
<h1 id='header'>Example</h1>
<!--This is an example html doc not the real thing!-->
<button onclick="spin(document.getElementById('header'));spin(document.getElementById('imgid'));">Spin!</button>
<script>
function spin(object) {
setInterval(function() {
object.style.transform += "rotate(10deg)";
}, 1);
}
</script>
How do I make the text spin correctly? If you could explain how it works then that would be great. If you need any references of my sources then:
SetInterval
style.transform
By "correctly" I mean spinning centered. (Not all over the page).
Thanks!
Try this. The main problem was that the width extended all the way across the page which messed up the rotation, so adding in display:inline-block made the width match up with the div's contents.
<style>
#imgid{display:inline-block;}
#myDIV{display:inline-block;}
</style>
<html>
<head>
<title>Example</title>
</head>
<body>
<div><img src="http://www.w3schools.com/html/html5.gif" id="imgid"></div>
<div><h1 id='myDIV'>Example</h1></div>
<div><button onclick="spin(document.getElementById('imgid'));spin(document.getElementById('myDIV'));">xdfdsf</button></div>
</body>
</html>
<script>
function spin(object)
{
setInterval(function()
{
object.style.transform += "rotate(10deg)";
}, 1);
}
</script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I will send my clients the link for the app in the following format
http://goo.gl.com/downloadtheapp (or whatever)
I want this file be somewhere on my server that includes java script code that checks what is the device type and redirects to the convenient store. that is, google play if the device was android based and appstore if the device was ios based.
till now I tried this, but it does not work.
<html>
<head>
<script type="text/javascript">
$(document).ready(function ()
{
if(navigator.userAgent.toLowerCase().indexOf("android") > -1)
{
window.location.href = 'http://play.google.com/store/apps/details?id=com.truecaller&hl=en';
}
if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1)
{
window.location.href = 'http://itunes.apple.com/lb/app/truecaller-caller-id-number/id448142450?mt=8';
}
}
</javascript>
</head>
<body>
</body>
</html>
The problem is with your script tag and you are missing );
And by the way, did you import jQuery?
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
window.location.href = 'http://play.google.com/store/apps/details?id=com.truecaller&hl=en';
}
if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
window.location.href = 'http://itunes.apple.com/lb/app/truecaller-caller-id-number/id448142450?mt=8';
}
});
</script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>
Event Handling
</title>
</head>
<body>
<h1> This is the chapter in which I am handling Events.The site you should visit is: </h1>
<b>here<b>
<script src="events.js"></src>
</body>
</html>
The javascript is like this:
var link = document.getElementsByTagName("a")[0];
link.onclick = MyEventHandler;
function MyEventHandler()
{
alert("ouch!");
return false;
}
It is not working, but using inling event handler I am doing it successfully. Please helop me.
You need to assign the event handler function, not the return value of calling that function.
link.onclick = MyEventHandler;
(Also note that you need to use the end tag </script> not </src>.)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I'm a beginner in JavaScript, and I have an issue running this script:
<html>
<head>
<title>some tests with javascript</title>
</head>
<body>
<p id="demo">Here I'm testing some code with javascript </p>
<script >
function myFunction() {
x = document.getELementById("demo");
x.innerHTML = "Hi! my content has been changed ! ^^";
}
</script>
<button type="button" onclick="myFunction()">click me !</button>
</body>
</html>
Why is the content of the demo element not changing after I click the button?
You have a spelling error. Instead of:
.getELementById //Here you have L with uppercase, has to be lowercase
do this
.getElementById //Check the 'l'
Cheers
Fiddle
Change
x = document.getELementById("demo");
into
x = document.getElementById("demo");