I realise this is all over the internet, but I can't actually find one that I know how to use. I'm very new to JS, and still pretty new to HTML. The most useful thing I've found is this, except I don't know how to actually implement it into my code. Based on something else I found, I tried this.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="Styling/style.css">
<script language="JavaScript">
var image = document.getElementById("img1");
var src = ["concert2.gif", "concert3.gif", "concert4.gif", "concert5.gif", "concert1.gif"];
</script>
</head>
<body>
<img id="img1" src="concert1.gif" alt="concert1.gif">
<script language="JavaScript">
var step = 0
function slideit() {
image.src = src[step];
image.alt = src[step];
if (step < 4) {
step++;
} else {
step = 1;
}
}
setInterval(slideit, 5000);
</script>
</body>
It didn't work, it just stayed at concert1.gif. Some help would really be appreciated!
-Thanks
The error is that you are trying to retrieve image element before it's loaded in the first script tag. Also language='javascript' is no longer required as JavaScript is now the only scripting language.
Here is your code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="Styling/style.css">
</head>
<body>
<img id="img1" src="concert1.gif" alt="concert1.gif">
<script>
var image = document.getElementById("img1");
var src = ["concert2.gif", "concert3.gif", "concert4.gif", "concert5.gif", "concert1.gif"];
var step = 0
function slideit() {
image.src = src[step];
image.alt = src[step];
if (step < 4) {
step++;
} else {
step = 1;
}
}
setInterval(slideit, 5000);
</script>
</body>
It still doesn't show up anything because maybe your src is not correct. But, you can still see alt attribute changing. LoL ;)
Related
A real beginner here, with a really basic question, but I simply can't get Javascript to change pictures when using the build in "onclick()" with HTML images..
I looked through so many questions about this, and tried different approaches to changing it, but can't get it to work.
I've tried with different src's, providing the full path and with online image adresses. Tried passing the variable. Simply can't get it to work.
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementByID("fpimage");
image.src = "logo2.png"
}
</script>
</head>
<body>
<img src="logo.png" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Change
var image = document.getElementByID("fpimage");
TO
var image = document.getElementById("fpimage");
You misspelled getElementById with a capital D
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementById("fpimage");
image.src = "logo2.png"
}
</script>
</head>
<body>
<img src="http://i.imgur.com/cJjyJaG.jpg" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Yep, like Clyde said, you made a mistake on the getElementById() function, keep in mind that Js is case sensitive ;)
<head>
<meta charset="utf-8">
<title> Javascript - changing images </title>
<script type="text/javascript">
function change() {
var image = document.getElementById("fpimage");
image.src = "http://www.dinosoria.com/mammifere/paresseux-206.jpg"
}
</script>
</head>
<body>
<img src="http://s.minutebuzz.com/i/2014/05/sloths-L.jpg.jpg" alt = "bla" id = "fpimage" onclick="change();"">
</body>
</html>
Please note that I am not using classes. I haven't found an answer for this SPECIFIC question.
Using javascript, how can I program a button to change the stylesheet each time the button is clicked?
I've tried different if, else if and else, but when I try them, it breaks the code (ie, it will change the color to blue if red, but not back again).
It works with 2 buttons, but getting it to change each time a single button is clicked seems to be eluding me. I got feed up and programmed a second button to change it back.
This works for 2 buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"Your Title Here"</title>
<link id="um" rel="stylesheet" href="stylesheet1.css">
<style>
</style>
</head>
<body>
<p>booga</p>
<button id="x" onclick="myFunction()">blue</button>
<button id="x1" onclick="myFunction1()">red</button>
<script>
function myFunction() {
if (document.getElementById("um").href = "stylesheet1.css"){
document.getElementById("um").href = "stylesheet2.css"}
}
function myFunction1() {
if (document.getElementById("um").href = "stylesheet2.css"){
document.getElementById("um").href = "stylesheet1.css"}
}
</script>
</body>
I would like to be able to get rid of the second button and second function and have it all with one button.
EDIT...
I tried this, and it failed.
function myFunction() {
if (document.getElementById("um").href == "stylesheet1.css")
{document.getElementById("um").href = "stylesheet2.css"};
else {document.getElementById("um").href = "stylesheet1.css"}
}
Make sure you're using == instead of = for your comparisons!
if (document.getElementById("um").href == "stylesheet1.css")
etc
Try this:
<button id="x" onclick="myFunction()">Change</button>
<script>
function myFunction() {
var link = document.getElementById("um");
var segments = link.href.split('/');
var currentStyle = segments[segments.length - 1];
var style = (currentStyle == 'stylesheet1.css') ? 'stylesheet2'
: 'stylesheet1';
document.getElementById("um").href = style + ".css"
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"Your Title Here"</title>
<link id="um" rel="stylesheet" href="stylesheet1.css">
</head>
<body>
<p>booga</p>
<button onclick="myFunction('um','stylesheet1.css', 'stylesheet2.css')">swap</button>
<script>
function myFunction(id,a,b) {
var el = document.getElementById(id);
var hrefStr;
if(~el.href.indexOf(a)) {
hrefStr = el.href.replace(a, b);
el.href = hrefStr;
} else {
hrefStr = el.href.replace(b, a);
el.href = hrefStr;
}
}
</script>
</body>
</html>
I am trying to make a really simple slider. All is working correctly except one thing. The problem is that it's not loading the image named as 'b.jpg'. If i rename the same picture with any other name it loads it but it's not loading any image with name 'b.jpg'.
Here's my code. Please tell me if something is wrong.
<!DOCTYPE html>
<html>
<head>
<title>Slider ~ Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="imgSlider">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here's script.js :
var imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
var mySlider = document.getElementById('imgSlider');
var imgIndex = 0;
function changeImage() {
mySlider.setAttribute('src', imgLinks[imgIndex]);
imgIndex++;
if (imgIndex >= imgLinks.length) {
imgIndex = 0;
};
}
var intervals = setInterval(changeImage, 2000);
mySlider.onclick = function (c) {
clearInterval(intervals);
}
your code has b.jgp and all others are jpg.
imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
correct it to b.jpg it will work fine
imgLinks = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
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');