Javascript DOM onclick not working for img src - javascript

I can't understand why the functions are not being called or if not that why the background image isn't being changed?
script tags:
<script type="text/javascript" >
function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").style.src = "cartman.png";
}
function kenny()
{
document.getElementById("image").style.src = "kenny.png";
}
</script>
body:
<body>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
</body>

Try with this
function cartman() {
document.getElementById("image").setAttribute('src','cartman.png');
}
function kenny() {
document.getElementById("image").setAttribute('src','kenny.png');
}

function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").setAttribute('src',"cartman.png");
document.getElementById("image").setAttribute('alt',"Image of cartman");
}
function kenny()
{
document.getElementById("image").setAttribute('src',"kenny.png");
document.getElementById("image").setAttribute('alt',"Image of kenny");
}
</script>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
Update the style.src to setAttribute.
Also consider setting alt tags and title for accessibility and screen readers.

Related

simple picture over picture in html

im trying to build a website, where u click on a text, and a picture appears, when you click on this picture, the next one appears and so on. If you reach the last picture, the first one should appear if you click on it. My code is very complicated and it does not work with the last picture. I hope somebody can help me!
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility="visible";
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility="visible";
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility="visible";
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
</body>
For simplicity, the button will be hidden after you click the first time on the button.
let start = 0,
total = 3,
hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");
function showImage() {
if (!hasStarted) {
button.classList.add("hide")
hasStarted = !hasStarted;
}
images.forEach(image => {
if (image.classList.contains("show")) {
image.classList.remove("show");
image.classList.add("hide");
}
})
document.querySelector(`.image${start}`).classList.add("show");
++start;
start = start % total;
}
images.forEach(image => {
image.addEventListener("click", showImage)
})
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>
I feel this is what you need:
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility = "visible";
document.getElementById('loadingimage').style.position = 'absolute';
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility = "visible";
document.getElementById('loadingimage2').style.zIndex = '10';
document.getElementById('loadingimage2').style.position = 'absolute'
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility = "visible";
document.getElementById('loadingimage3').style.zIndex = '15';
document.getElementById('loadingimage3').style.position = 'absolute'
}
function showImage4() {
document.getElementById('loadingimage').style.zIndex = '20';
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
<img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
<img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>

I need help for a school project

I'm new in HTML and Javascrit and I need to scrool sections using two buttons. I wrote a code which works with one two sections. How can I use it with more than two?
<body>
<button id="a1" onclick="f1()"><img width="100%" height="100%"
<button id="a2" onclick="f2()"><img width="100%" height="100%"
</body>
function f1() {
var elmnt1 = document.getElementById("sez1");
elmnt1.scrollIntoView();
}
function f2() {
var elmnt2 = document.getElementById("sez2");
elmnt2.scrollIntoView();
}
How about having target element's id as a parameter?
function scrollTo(id) {
document.getElementById(id).scrollIntoView();
}
Then you can use it as:
onclick="scrollTo('sez3')"
I assume you want to write a generic function which will call 'scrollIntoView' on the clicked Element, you can do something like:
<body>
<button id="a1" onclick="genericfunc(event, 'id1')"><img width="100%" height="100%" /></button>
<button id="a2" onclick="genericfunc(event, 'id2')"><img width="100%" height="100%" /></button>
</body>
<script>
function genericfunc(event, id) {
var elmnt = document.getElementById(id);
elmnt.scrollIntoView();
}
</script>
I don't know if I understand the question correctly, maybe you're looking for something like this:
<body>
<button id="a1" onclick="f1('divID1')">
<button id="a2" onclick="f1('divID2')">
</body>
function f1(divID) {
var elmnt1 = document.getElementById(divID);
elmnt1.scrollIntoView();
}
However, there are several ways to scroll, for example:
Via Anchor
<div id="myDiv"></div>
location.href = "#myDiv";
Via offsetTop
<div id="myDiv">
<div id="myInnerDiv"></div>
</div>
let myElement = document.getElementById('myInnerDiv');
let topPos = myElement.offsetTop;
document.getElementById('myDiv').scrollTop = topPos;
function GetDisplayed(id) {
var element = document.getElementById(id);
element.scrollIntoView();
}
#sez1{
position: absolute;
top: 1000px;
left: 2000px; ;
}
#sez2{
position: absolute;
top: 2000px;
left: 1000px; ;
}
#sez3{
position: absolute;
top: 500px;
left: 2500px; ;
}
<body>
<button id="a1" onclick="GetDisplayed('sez1')">Button 1</button>
<button id="a2" onclick="GetDisplayed('sez2')">Button 2</button>
<button id="a3" onclick="GetDisplayed('sez3')">Button 3</button>
<section id="sez1">First section</section>
<section id="sez2">Second section</section>
<section id="sez3">Third section</section>
</body>

how to onclick change image between 3 images

Hi I am new to javascript and I want to change the image when I click the image. I can do this with 2 images, how do I do this with 3 images?
function change() {
var image = document.getElementById('changeimg');
console.log(image)
switch (image) {
case "image2":
document.getElementById('changeimg').src = "css3.png";
break;
default:
case "image3":
document.getElementById('changeimg').src = "javascript.png";
}
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>
Just replace your real image name in the imgArr
var img = 0;
var imgArr = ["img1.png", "img2.png", "img3.png"]
function change() {
var image = document.getElementById('changeimg');
console.log("Current image => ", imgArr[img])
document.getElementById('changeimg').src = imgArr[img];
if (img == 2) img = 0;
else
img++;
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>

unable to change image in a div through javascript

Here is my code:
<!DOCTYPE html>
<html>
<body>
<script>
function light() {
if (document.getElementById("push").value == "OFF") {
document.getElementById("bulb").style.backgroundImage = url("1.png");
document.getElementByID("push").value = "ON";
}
else {
document.getElementById("bulb").style.backgroundImage = url("2.png");
document.getElementByID("push").value = "OFF";
}
}
</script>
<center>
<input type="button" id="push" onclick="light()" value="OFF" />
<div id="bulb" style="background-image:url(2.png);width:320px;height:420px">
</div>enter code here
</center>
</body>
</html>
This line:
document.getElementById("bulb").style.backgroundImage = url("1.png");
attempts to call a function called url and pass a string to it, and then assign the result of that to the backgroundImage property.
Instead, you want to assign a string to backgroundImage directly:
document.getElementById("bulb").style.backgroundImage = "url(1.png)";
// Note ------------------------------------------------^----^----^^
Example:
document.getElementById("bulb").style.backgroundImage = "url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32)";
<div id="bulb" style="width: 32px; height: 32px"></div>
That said, it would be better to define your styling and such in CSS and then associate those styles with elements using selectors, for instance via a class association:
CSS:
.class-saying-what-the-image-represents {
background-image: url(1.png);
}
JavaScript:
document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");
Example:
document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");
.class-saying-what-the-image-represents {
background-image: url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32);
}
<div id="bulb" style="width: 32px; height: 32px"></div>

Event listener hover changing other element

I made this script for showing/hiding other div that comes to place of the one with event (ricon1) on mouse in and out:
HTML:
<div class="rule-container">
<div class="rule" id="rule1">
<div class="rule-icon" id="ricon1">
</div>
<div class="rule-decription" id="rdescription1">
</div>
</div>
<div class="rule" id="rule2">
<div class="rule-icon" id="ricon2">
</div>
<div class="rule-decription" id="rdescription2">
</div>
</div>
<div class="rule" id="rule3">
<div class="rule-icon" id="ricon3">
</div>
<div class="rule-decription" id="rdescription3">
</div>
</div>
<div class="rule" id="rule4">
<div class="rule-icon" id="ricon4">
</div>
<div class="rule-decription" id="rdescription4">
</div>
</div>
</div>
CSS:
div.rule {
display: inline-block;
width:20%;
margin-left:2%;
margin-right:2%;
background-color: cadetblue;
}
div.rule:first-child {
margin-left:3.5%;
background-color:yellow;
}
div.rule > div {
width:100%;
}
div.rule-icon {
height:240px;
background-color:lightpink;
display:block;
}
div.rule-decription {
height: 240px;
background-color: springgreen;
display:none;
}
JS:
document.getElementById("ricon1").addEventListener("mouseenter",function (){
document.getElementById('ricon1').style.display = 'none';
document.getElementById('rdescription1').style.display = 'block';
});
document.getElementById("ricon1").addEventListener("mouseout",function (){
document.getElementById('ricon1').style.display = 'block';
document.getElementById('rdescription1').style.display = 'none';
});
But the problem is that it flashes (continuously switching between on and off state, what am i doing wrong ?
How may i change script so i dont have to do it for all pairs of divs (ricon1, rdescription1; ricon2, rdescription2... etc) because there is like 6 pairs?
Is there a specific reason you don't want to use jQuery for that?
Anyway, here's an example without jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class = "switch">
<div class = "icon">A</div>
<div style = "display:none" class = "desc">Desc1</div>
</div>
<div class = "switch">
<div class = "icon">B</div>
<div style = "display:none" class = "desc">Desc2</div>
</div>
<div class = "switch">
<div class = "icon">C</div>
<div style = "display:none" class = "desc">Desc3</div>
</div>
<script>
var icons = document.querySelectorAll('.switch');
for (var i = 0; i < icons.length; i++) {
icons[i].addEventListener("mouseenter", function() {
(this.querySelectorAll(".icon")[0]).style.display = 'none';
(this.querySelectorAll(".desc")[0]).style.display = 'block';
});
icons[i].addEventListener("mouseleave", function() {
(this.querySelectorAll(".icon")[0]).style.display = 'block';
(this.querySelectorAll(".desc")[0]).style.display = 'none';
});
}
</script>
</body>
</html>

Categories

Resources