We Keep Coding

How do I show png images based on their names in javascript?

I have a folder with png images and several other types of files. I only want to display the png images in the order of their names, how can I do that? All images end in a number; for example, each image is titled "image_001", "image_002", and so on. Right now I have all the images grouped together in a class as shown below but I'd prefer not to have to add every individual image if I didn't want to include any other file types. Thank you in advance.
<section>
<img class="pics" src="imgfolder/picture_001.png" style="width:80%">
<img class="pics" src="imgfolder/picture_002.png" style="width:80%">
<img class="pics" src="imgfolder/picture_003.png" style="width:80%">
</section>
<script type="text/javascript">
var index = 0;
change();
function change() {
var images = document.getElementsByClassName('pics');
for(var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
index++;
if(index > images.length) {
index = 1;
}
images[index - 1].style.display = "block";
setTimeout(change, 3000);
}
</script>

The JS code is commented with what it does. I've tested this with the same file structure that you used in your question, but you can change it on JS line 9.
<section id="img-container"></section>
const numOfPictures = 3; // The number of pictures in folder
const picturesNumberLength = 3; // "000"
let imageIndex = 1;
let imagesArray = [];
const imagesContainer = document.getElementById("img-container"); // Get the images container, has id "img-container"
for (let i = 1; i < numOfPictures + 1; i++) { // Starts at a 1 index "001"
const img = document.createElement("img"); // Create an image element
img.src = `imgfolder/picture_${(i+"").padStart(picturesNumberLength,"0")}.png`; // Set the source to "imgfolder/picture_001" or other number, works up to 999
img.classList.add("pics"); // Add the pics class
img.style.width = "80%"; // Sets width to 80%
img.style.display = "none"; // Turns off displaying it
imagesContainer.appendChild(img); // Puts the image in the image container
imagesArray.push(img); // Push the reference to the array
}
imagesArray[0].style.display = "block"; // Display the first block
setInterval(() => { // Every 3000ms (3secs), do this
imagesArray[imageIndex].style.display = "block"; // Turn displaying on
if (imageIndex > 0) imagesArray[imageIndex-1].style.display = "none"; // Turn the previous one off
else imagesArray[numOfPictures-1].style.display = "none";
imageIndex++; // Change the index
if (imageIndex >= numOfPictures) imageIndex = 0; // Go back to the beginning after going to the end
}, 3000);

Why is my variable not incrementing?

I'm trying to build a very basic slider. I managed to create something but I am stuck when I try to change from one slide to another. I was thinking my code would work but it does not and I don't understand why.
Here's a link to a codepen of it
Here's the relevant part of my problem:
I have defined a slider like so:
var carrousel = document.getElementById('carrouselcontainer');
var slide1 = document.createElement('div');
slide1.className = 'slide1';
var slide2 = document.createElement('div');
slide2.className = 'slide2';
var slide3 = document.createElement('div');
slide3.className = 'slide3';
var slider = [slide1, slide2, slide3]
carrousel.appendChild(slider[0]);
And this does work. Now I am trying to add a function that will increment or decrement the slider variable when clicked.
var backButton = document.getElementById('backButton');
var forwardButton = document.getElementById('forwardButton')
function forward() {
slider++
}
forwardButton.addEventListener('click', forward)
But when I click on the forwardButton element, nothing happens. I know that the eventListener is working since I tried a window.alert() message on it and it works when I click it. What is it that I am doing wrong here?

Incrementing an array will not work but only generate error.
forward() should remove the actual child of the carrousel and
add a new child that has as value the next element of the slider array:
Introduce a currentSlide number variable to indicate the current index displayed and increment it in forward().
var currentSlide = 0;
...
carrousel.appendChild(slider[currentSlide]);
...
function forward() {
carrousel.removeChild(slider[currentSlide++]);
if (currentSlide >= slider.length){
currentSlide = 0;
}
carrousel.appendChild(slider[currentSlide]);
}

You need some kind of index which you use to get something out of your array:
var forwardButton = document.getElementById('forwardButton');
var result = document.getElementById('carrouselcontainer');
var sliderIndex = 0;
var slider1 = document.createElement("div");
slider1.innerHTML = "item 1";
var slider2 = document.createElement("div");
slider2.innerHTML = "item 2";
var slider3 = document.createElement("div");
slider3.innerHTML = "item 3";
var slider = [slider1, slider2, slider3];
result.appendChild(slider[sliderIndex]);
function forward() {
result.removeChild(slider[sliderIndex]);
sliderIndex = (sliderIndex + 1) % slider.length;
result.appendChild(slider[sliderIndex]);
}
forwardButton.addEventListener('click', forward);
<button id="forwardButton">Increment</button>
<div id="carrouselcontainer"></div>

You have to replace the element only incrementing the element does not work:
I added a counter "silderPos" to your script, so you can increment it by one on every click.
If it larger then 2 it will go back to 0 by a modulo action.
I made the carrouselElement global, so that your click script can access the element directly.
With this changes i can now go throu all of your element.
Please find the modified source code here:
var carrouselElement;
var sliderPos = 0;
function carrousel()
{
carrouselElement = document.getElementById('carrouselcontainer');
var slide1 = document.createElement('div');
slide1.className = 'slide1';
var slide2 = document.createElement('div');
slide2.className = 'slide2';
var slide3 = document.createElement('div');
slide3.className = 'slide3';
var slider = [slide1, slide2, slide3]
carrouselElement.appendChild(slider[0]);
var backButton = document.getElementById('backButton');
var forwardButton = document.getElementById('forwardButton')
function forward() {
carrouselElement.lastChild.remove();
sliderPos++;
sliderPos = sliderPos % 3;
carrouselElement.appendChild(slider[sliderPos]);
}
/*backButton.addEventListener('click', back)*/
forwardButton.addEventListener('click', forward)
}
window.addEventListener('load', carrousel);

How do you use increments?

I am not sure how to use increments.
through a function. i can't get the paragraph to show the array words
<p id= "demo"
var Array = ["hello", "goodbye"];
var mimg = document.getElementById(imageArray[0]);
mimg.setAttribute('src', [index]);
//var ArrayIndex = 0;
function change() {
("src", Array[Index]);
imageIndex++;
if (Index >= Array.length) {
Index = 0;
}
}

Don't forget to use your browser's console, read this article Using Your Browser to Diagnose JavaScript Errors.
Don't use setattribute function, use src attribute.
var myImage = document.getElementById("mainImage");
var imageArray = ["http://lorempixel.com/400/200/sports/1/", "http://lorempixel.com/400/200/sports/2/", "http://lorempixel.com/400/200/sports/3/", "http://lorempixel.com/400/200/sports/4/"];
myImage.src = imageArray[0];
var imageIndex = 0;
function changeImage() {
myImage.src = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length)
imageIndex = 0;
}
window.onload = function() {
setInterval(function() {
changeImage();
}, 1000);
};
<img id="mainImage" />

var myImage = document.getElementById("mainImage");
var imageArray = ["images/1.png","images/2.png","images/3.png","images/4.png"];
var mimg=document.getElementById(imageArray[0]);
mimg.setAttribute('src',photos[index]);
You aren't showing your relevant HTML, but I notice in this section you are getting an element with ID "images/1.png" and setting the src of that element to the value of something in photos[index]. You haven't shown how the photos array is loaded. Do you actually have an element with an ID "images/1.png"?
In your function, you set the src of the mainImage to the values in imageArray rather than the values in the photo array. That may be valid, but since that is different than what you did outside the function, I want to make sure that was intended.

I think you are talking about such solution:
var imageArr=["images/1.png", "images/2.png", "images/3.png", "images/4.png"];
$('#button'). on('click',function(){
var index=(Math.random(0,imageArr.length)*10)
$('#img').attr('src',imageArr[index])
});
Again you question is not clear, thus I think this will help you to get direction.

This should be solution if you are using plain JavaScript
var myImage = document.getElementById("mainImage"),
imageArray = ["images/1.png", "images/2.png", "images/3.png", "images/4.png"],
imageArrayIndex = 0;
myImage.src = imageArray[imageArrayIndex++];
function changeImage () {
myImage.src = imageArray[imageArrayIndex++];
imageArrayIndex = imageArrayIndex >= imageArray.length ? 0 : imageArrayIndex;
}
Make sure that your element is defined as "img".

Here's a solution which sets a data-index attribute on the image to keep track of the selected index. This solution is compatible with down to IE8 and does not use the Jquery library. Run the code snippet below for a test (click the image to go to the next one).
var mimg = document.getElementById('main-image'),
simg = document.getElementById('sec-image')
imgArr = [
'http://placehold.it/50x50/00AAAA',
'http://placehold.it/50x50/AAAA00',
'http://placehold.it/50x50/AA00AA',
];
var loopImages = function(element, imgArray, startAt) {
var index = element.getAttribute('data-index'),
newIndex = 0;
if (!index)
newIndex = ((startAt && startAt < imgArr.length-1) || 0) + 1;
else if (index < imgArr.length-1)
newIndex = parseInt(index) + 1;
element.setAttribute('data-index', newIndex);
element.src = imgArr[newIndex];
};
mimg.addEventListener('click', function(e) {
loopImages(e.target || e.srcElement, imgArr);
});
setInterval(function() {
loopImages(simg, imgArr);
}, 500);
<p>Preview (click to change)</p>
<img id="main-image" src="http://placehold.it/50x50/00AAAA">
<br>
<p>Preview with interval</p>
<img id="sec-image" src="http://placehold.it/50x50/00AAAA">

How can I display the image name on mouseover?

I have 2 arrays, an image array and a price array.
I have the images displaying, but I'd like to display the price, which at the moment I have held in the image name, when I mouseover the image, is it possible?
HTML
<section id=main>
<!--populate with images from array-->
<p id="photos" class="product_display">
<script>getImage();</script>
</section>
JS
//image array for products
var imageArray = new Array();
imageArray[0]="images/coffee_prod_1.png";
imageArray[1]="images/coffee_prod_2.png";
imageArray[2]="images/coffee_prod_3.png";
imageArray[3]="images/coffee_prod_4.png";
imageArray[4]="images/coffee_prod_5.png";
imageArray[5]="images/coffee_prod_6.png";
imageArray[6]="images/coffee_prod_7.png";
//price array for products
var priceArray = ["€11.90", "€12.90", "€13.90", "€14.90", "€15.90", "€16.90", "€17.90"];
function getImage(){
var container = document.getElementById("photos");
for (var i=0; i < imageArray.length; ++i) {
var img = new Image();
img.src = imageArray[i];
img.className = "product_details";
img.name = priceArray[i];
container.appendChild(img);
}
}
I thought I might be able to add something like 'img.onmouseover = imageMouseOver(priceArray[i]);' to my getImage function, and then have something inside the function that would display the image name (ideally over the image) on mouseover. I was hoping to apply an opaque colour too so the image name might be clearer.
Any help would be appreciated!

I would suggest creating a container div for each photo, and in each container add your and like another div that contains the price. Set the price divs hidden at first with display:none or something, and then in your javascript add some listeners to show and hide it:
for (var i=0; i < imageArray.length; ++i) {
var img = new Image();
img.src = imageArray[i];
img.className = "product_details";
var container = document.createElement("div");
var price = document.createElement("div");
price.innerHTML = priceArray[i];
//Style your price and image elements so they fit in the container and the price is displayed over the image etc
container.appendChild(price);
container.appendChild(img);
container.onmouseover = function() {
container.getElementByClass("price").style.display = "block";
};
container.onmouseout = function() {
container.getElementByClass("price").style.display = "none";
};
}
You may need to fiddle with the onmouseover/out events a bit if showing the price div messes it up i.e. onmouseover is called on the layer with the highest z index instead of container, I haven't tried it but this should give you a rough idea

Working example here:
http://jsfiddle.net/0vts5291/
HTML
<section id=main>
<!--populate with images from array-->
<p id="photos" class="product_display">
</section>
JS
var imageArray = new Array();
imageArray[0]="images/coffee_prod_1.png";
imageArray[1]="images/coffee_prod_2.png";
imageArray[2]="images/coffee_prod_3.png";
imageArray[3]="images/coffee_prod_4.png";
imageArray[4]="images/coffee_prod_5.png";
imageArray[5]="images/coffee_prod_6.png";
imageArray[6]="images/coffee_prod_7.png";
//price array for products
var priceArray = ["€11.90", "€12.90", "€13.90", "€14.90", "€15.90", "€16.90", "€17.90"];
function getImage() {
var container = document.getElementById("photos");
for (var i = 0; i < imageArray.length; ++i) {
var img = new Image();
img.src = imageArray[i];
img.className = "product_details";
img.name = priceArray[i];
img.title = priceArray[i];
container.appendChild(img);
}
}
getImage();

Using readAsDataURL() for image preview

jsFiddle URL: http://jsfiddle.net/Xotic750/AjtLx
Been working on this all day and I can't see the issue. It's probably due to my narrow understanding of how FileReader objects work but what I'm trying to do is use readAsDataURL() to obtain images a user has selected and preview them on the screen in a table. Everything is working minus...you guessed it...the preview...well sort of. I'm thinking I'm close because the preview will work, BUT it only displays the last image of the set. Say for example if I uploaded 6 images then the first row of 3 images would be broken, the second row the first 2 would be broken, then the final 6th image would display the preview....Any advice greatly appreciated. Also, once this works it might help others trying to do the same thing because I've searched all over for a solution to this issue and I can't seem to dig anything up....
function PreviewImages() {
var inputID = document.getElementById('input_clone');
var totalImages = inputID.files.length;
var imagesPerRow = 3;
var numRows = totalImages / imagesPerRow;
var row = "";
var cell = "";
var element1 = "";
var elementID = "";
for(var i = 0; i < numRows; i++){ //create rows
row = document.getElementById('image_preview_table').insertRow(i);
for(var ii = 0; ii < imagesPerRow; ii++){ //create cells
cell = row.insertCell(ii);
elementID = "img_" + ii;
element1 = document.createElement("img");
element1.name = elementID;
element1.id = elementID
cell.appendChild(element1);
oFReader = new FileReader();
oFReader.onload = function(oFREvent){
var dataURI = oFREvent.target.result;
var image = document.getElementById(elementID);
image.src = dataURI;
};
oFReader.readAsDataURL(document.getElementById("input_clone").files[ii]);
}
}
}

The problem with your code is: readAsDataURL() is asynchronous, you should wait until it finishes reading before you invoke a second reading or make a new instance by calling new FileReader().
The answer by Xotic750 works because he creates one FileReader for each image, while you used only one FileReader.
But, using FileReader to preview images is not a good choice, as FileReader.readAsDataURL() converts the whole image to a large string (in the form of "data:image/jpeg;base64,/9j/4SVaRXhpZgAAS......"), and you show the image by placing the whole string of image data into the img.src attribute, if your image is large, you take the risk of running out of memory.
img.src is meant to contain the url of the image, not the data of the image, although you can assign a url containing the whole image data via img.src = "data:image/jpeg;......".
So, you should use window.URL.createObjectURL() to create a url referring to your local image, and assign this url to img.src:
...
img.src = window.URL.createObjectURL(fileInput.files[i]);
...

Here is a solution, quite a bit of adjustment was made to your original to get it to work, as you will probably notice.
CSS
div.rounded {
width: 100%;
border-style: solid;
border-width: 1px;
border-radius: 5px;
}
label {
display: block;
}
input {
display: block;
}
#previewTable {
width: 100%;
}
HTML
<div id="imagesDiv" class="rounded">
<label for="chooseFiles">Add Images</label>
<input type="file" id="chooseFiles" multiple="multiple" />
<table id="previewTable">
<thead id="columns"></thead>
<tbody id="previews"></tbody>
</table>
</div>
Javascript
(function (global) {
var imagesPerRow = 3,
chooseFiles,
columns,
previews;
function PreviewImages() {
var row;
Array.prototype.forEach.call(chooseFiles.files, function (file, index) {
var cindex = index % imagesPerRow,
oFReader = new FileReader(),
cell,
image;
if (cindex === 0) {
row = previews.insertRow(Math.ceil(index / imagesPerRow));
}
image = document.createElement("img");
image.id = "img_" + index;
image.style.width = "100%";
image.style.height = "auto";
cell = row.insertCell(cindex);
cell.appendChild(image);
oFReader.addEventListener("load", function assignImageSrc(evt) {
image.src = evt.target.result;
this.removeEventListener("load", assignImageSrc);
}, false);
oFReader.readAsDataURL(file);
});
}
global.addEventListener("load", function windowLoadHandler() {
global.removeEventListener("load", windowLoadHandler);
chooseFiles = document.getElementById("chooseFiles");
columns = document.getElementById("columns");
previews = document.getElementById("previews");
var row = columns.insertRow(-1),
header,
i;
for (i = 0; i < imagesPerRow; i += 1) {
header = row.insertCell(-1);
header.style.width = (100 / imagesPerRow) + "%";
}
chooseFiles.addEventListener("change", PreviewImages, false);
}, false);
}(window));
On jsfiddle