onclick get image index in for loop in javascript not jquery, the main problem here is that i can't access any global variable in function
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title></title>
</head>
<body>
<img src="images/2.jpg" width="350" height="250">
<img src="images/3.jpg" width="350" height="250">
<img src="images/4.jpg" width="350" height="250">
<img src="images/5.jpg" width="350" height="250">
<img src="images/6.jpg" width="350" height="250">
<img src="images/7.jpg" width="350" height="250">
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>
/*external javascript file code */
var img = document.images;
var i;
for(i=0;i<img.length;i++){
img[i].src = "images/1.jpg";
//after changing image src i just want to show index of clicked image
img[i].onclick = function(){
alert("i m img "+ i);
console.log(i);
}
console.log(i);
}
You can store the index in your own html attribute like index-data using setAttribute and getAttribute:
var img = document.images;
var i;
for (i = 0; i < img.length; i++) {
img[i].src = "images/1.jpg";
img[i].setAttribute("index-data", i);
//after changing image src i just want to show index of clicked image
img[i].onclick = function() {
var index = this.getAttribute("index-data");
console.log(index);
}
}
<img src="images/2.jpg" width="350" height="250">
<img src="images/3.jpg" width="350" height="250">
<img src="images/4.jpg" width="350" height="250">
<img src="images/5.jpg" width="350" height="250">
<img src="images/6.jpg" width="350" height="250">
<img src="images/7.jpg" width="350" height="250">
You can use the attribute dataset to store the current index.
var img = document.images;
var i;
var images = ['https://www.hrexaminer.com/wp-content/uploads/2016/10/2016-10-11-hrexaminer-stackoverflow-6-xxl-sq-250px.png', 'https://i.stack.imgur.com/G2FO1.jpg?s=48&g=1']
for (i = 0; i < img.length; i++) {
img[i].src = images[i];
img[i].dataset.index = i;
img[i].onclick = function() {
var index = this.dataset.index;
console.log(index);
}
}
<img src="" width="100" height="100">
<img src="" width="100" height="100">
This is a classical closure problem inside a loop.
The simple solution to this problem is to wrap the code block which has
indefinite execution, inside a IIFE block.
read about it here : Javascript closures
for(i=0;i<img.length;i++){
img[i].src = "images/1.jpg";
(function(index){
img[index].onclick = function(){
alert("i m img "+ index);
console.log(index);
}
})(i)
}
Related
Please help. This div and script works only once. I want to separate slideshows one after the other ,with different images. But if I try to write this script more than once the slideshow doesn't work. I tried everything I can. The div and the script works fine when it comes to a page with only one age slideshow.but when it's more than one it doesn't.
<div >
<img alt="kandy" src="kandy4.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy2.jpg" style="width:1000"
height="500" class="kandy">
<img alt="kandy" src="kandy3.jpg" style="width:1000"
height="500" class="kandy">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("kandy");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3
seconds
}
</script>
<div >
<img alt="ella" src="ella4.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella2.jpg" style="width:1000"
height="500" class="ella">
<img alt="ella" src="ella3.jpg" style="width:1000"
height="500" class="ella">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var j;
var y = document.getElementsByClassName("ella");
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
myIndex++;
if (myIndex > y.length) {myIndex = 1}
y[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3
seconds
}
</script>
I'm not sure I fully understood the question but perhaps the following might be of use? A slightly simplified layout from the orginal but same content - except for changes made to the style attribute which was incorrect.
If the carousel function accepted arguments then you can call it many times with different arguments - as it was a later calling would like overwrite the previous invocation of the function.
<div>
<img alt="kandy" src="kandy4.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy2.jpg" width='1000px' height='500px' class="kandy">
<img alt="kandy" src="kandy3.jpg" width='1000px' height='500px' class="kandy">
</div>
<div>
<img alt="ella" src="ella4.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella2.jpg" width='1000px' height='500px' class="ella">
<img alt="ella" src="ella3.jpg" width='1000px' height='500px' class="ella">
</div>
<script>
/* pass in whatever class as an argument */
const carousel=function( _classname, _index, _time ){
let col=document.getElementsByClassName( _classname );
Array.prototype.slice.call( col ).forEach(function(e){
e.style.display='none';
});
if( _index > col.length - 1 ) _index=0;
col[ _index ].style.display='block';
console.info( col[ _index ] );
setTimeout( function(){
carousel.call( this, _classname, _index, _time );
},_time * 1000 );
_index++;
}
carousel('kandy',0,3);
carousel('ella',0,3);
</script>
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
I would like to know if there is a different way to add only one code instead of repeating eq selector every time.
startSliding($("div").eq(unlimited));
The full js file is:
startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
startSliding($("div").eq(3));
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
I got this way in another question from some one who helped me to much but now working on Im getting more ideas on my project, and the DIVs that I have in page are changing, sometimes in a page I have 10 divs sometimes 50.Adding eq selector for each div will effect in pagespeed too. so if there is a shorter code which does the same job would be great to know.I'm a newbea with javascript :(
https://jsfiddle.net/jhudrp8v/11/
Thank You!
It's very simple to do so.
You have to just use .each() jquery method.
Check below code snippet for the same -
// Added code
let elem = $('div.someclass');
elem.each(function(i) {
startSliding(elem.eq(i));
});
// Your code
function startSliding (div) {
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img", div).map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)", div).remove();
$("img", div).hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
For more info on .each() refer https://api.jquery.com/eq/
Hope this will help you :)
I've attached an onclick event on two images. I would like to display a different message for each image. How do I create an if/else statement to display one message "You Liked this Cat!" if one image is clicked and the other "You Didn't Like this Cat!"
<img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
<img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"></img>
<img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile();"></img>
<img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile();"></img>
<p id="display_message"></p>
function hide_profile() {
document.getElementById("profile_pic").style.visibility = "hidden";
}
function show_profile() {
document.getElementById("next_profile").style.display = "block";
document.getElementById("next_profile").style.visibility = "visible";
document.getElementById("profile_pic").style.display = "none";
document.getElementById("display_message").innerHTML = "You Liked this Cat!";
}
In the HTML element you can pass its ID
<img onclick="functionName(this.id)">
And in Javascript:
function functionName(clicked_id){
if(clicked_id == "cat"){
...
}
}
You may need to add some attribute (e.g. id or rel) to your image tags and assign some unique value to them so you can identify it onclick event handler and show message accordingly.
Or rather pass some param with onclick function.
I am providing code pressuming used with jQuery.
<IMG SRC='IMG1.jpg' id='1' onclick='updatepic(1)'>
Javascript function
function updatepic(id) {
if(id==1) {
//change the innerhtml for pic 1
}
else {
//change the innerhtml for pic 2
}
}
Pass the text to the show_profile function.
Try this code:
function hide_profile() {
document.getElementById("profile_pic").style.visibility = "hidden";
}
function show_profile(message) {
document.getElementById("next_profile").style.display = "block";
document.getElementById("next_profile").style.visibility = "visible";
document.getElementById("profile_pic").style.display = "none";
document.getElementById("display_message").innerHTML = message;
}
<img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
<img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"></img>
<img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile('You Liked this Cat!');"></img>
<img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile('You Didn\'t Like this Cat!');"></img>
<p id="display_message"></p>
I want to make this Javascript code to when I click "remove image" link , it remove the image. Please help me.
<script>
function previewFile(){
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
previewFile();
</script>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
remove image
</body>
</html>
<img id='image' src="" height="200" alt="Image preview...">
<a id='remove' href="#">remove image </a>
<script>
$(function rmv() {
$('#remove').click(function() {
$('#image').remove();
}
});
</script>
If you cannot add id attribute to that img, you can remove it like this with raw javascript - it assumes the image is preceding the anchor tag directly, allowing for only one text node between them:
function removeImage(el){
if(!el.previousSibling.tagName){//if it is textnode like newline etc. we go one back
var el = el.previousSibling;
}
if(el.previousSibling.tagName && el.previousSibling.tagName=='IMG'){
el.previousSibling.remove();
}
}
<img src="" height="200" alt="Image preview...">
remove image
Keep img element in div and assign id to both this element
<input type="file" onchange="previewFile()"><br>
<div id="imgDiv"> <img id="image1" src="" height="200" alt="Image preview..."></div>
remove image
</body>
</html>
<script>
function previewFile() {
var d = document.getElementById('imgDiv');
var olddiv = document.getElementById("image1");
d.removeChild(olddiv);
}
</script>
<img src="" id="image" height="200" alt="Image preview...">
remove image
JS:
function foo(){
var image = document.getElementById("image");
if (image != null)
{
image.parentNode.removeChild(image);
}
}
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");