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>
Related
Im using botman.io package for chatboot widget.
Everything works perfectly but problem is that i can't change default background color of chat widget. On inspect console it shown that boman widget calls ( https://cdn.jsdelivr.net/npm/botman-web-widget#0.0.20/build/assets/css/chat.css ) link, but i cant find that call on my localhost project. If anyone know solution i would appreciate.
<script src="{{ asset('/js/webflow.js') }}"></script>
<script>
var botmanWidget = {
title:'Scarletbot',
introMessage: 'Hello, I am a Scarlet! I am here to assist you and answer all your questions about our products and services!',
mainColor:'#c02026',
aboutText:'',
bubbleBackground:'#c02026',
headerTextColor: '#fff',
};
</script>
<script id="botmanWidget" src="{{ asset('/js/widget.js') }}"></script>
You may add frameEndpoint in
var botmanWidget = {
frameEndpoint: '<?php echo base_url('botdemo/chatserver1');?>',
title:'Scarletbot',
introMessage: 'Hello, I am a Scarlet! I am here to assist you and answer all your questions about our products and services!',
mainColor:'#c02026',
aboutText:'',
bubbleBackground:'#c02026',
headerTextColor: '#fff',
};
frameEndpoint is nothing but source of iframe loaded by botman-widget
frameEndpoint source is like :
<!doctype html>
<html>
<head>
<title>BotMan Widget</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/assets/css/chat.min.css">
</head>
<body>
<script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/chat.js'></script>
</body>
</html>
Here you may use own css as well.
I quickly checked out the web widget on the botman github.
There is a simple link to the chat.css in the head of chat.html located in the src folder.
This points to assets/css/chat.css, which you can edit freely and add a background-color to.
I use brute force in the iframe to change background with jquery
$(document).on('click', '.desktop-closed-message-avatar img', function() {
var iframe = document.getElementById("chatBotManFrame");
iframe.addEventListener('load', function () {
var htmlFrame = this.contentWindow.document.getElementsByTagName("html")[0];
var bodyFrame = this.contentWindow.document.getElementsByTagName("body")[0];
var headFrame = this.contentWindow.document.getElementsByTagName("head")[0];
var image = "https://images.unsplash.com/photo-1501597301489-8b75b675ba0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80"
htmlFrame.style.backgroundImage = "url("+image+")";
bodyFrame.style.backgroundImage = "url("+image+")";
});
});
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 ;)
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'];
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');
The HTML file has:
<html>
<head>
<title>title</title>
<script style="text/css" src=".\Scripts\CSS\tryc.css"></script>
<script style="text/javascript" src=".\Scripts\JavaScripts\Text8.js"></script>
</head>
<body id="body">
<h1 id="heading1">Coming Soon</h1>
<object id="circle-svg" width="1300" height="560" type="image/svg+xml" data=".\Scripts\svg\ulti.svg"></object>
</body>
</html>
The JavaScript has
window.onload = function () {
var as = document.getElementById("body");
var as1 = as.getElementById("heading1");
as1.style.color = "blue";
alert(as1);
alert("try");
};
The text does not turn blue.
getElementById must always be called from a document object.
var as = document.getElementById("body");
var as1 = as.getElementById("heading1");
var as1 = document.getElementById("heading1");
No nested context is needed, because IDs must be unique within the document.
And FWIW, you can use document.body instead of putting an ID on the body.
Oh, also you should use forward slashes instead of backslashes to get your script.
<script type="text/javascript" src="./Scripts/JavaScripts/Text8.js"></script>
I dont think you can use
as.getElementById();
Why dont you go directly with:
as = document.getElementById('heading1');
as.style.color = 'blue';