We Keep Coding

Connect function to pictures displayed from a PC folder

I'm pretty new to JS and programming altogether so I'm sorry in advance if the explanation is a little sloppy, but I'll try to make it as clear as possible.
So what I'm trying to do is have a JS code that reads and displays (in an HTML page) photos from a PC folder, makes them clickable and on the click it redirects you to a page with the same photo but in high resolution.
Now, I have this piece of code that displays the said pictures, but the thing is I don't seem to be able to figure out how to "connect" it to the pictures and make them clickable. What makes it more difficult is that I'm trying to make all of this code dynamic (as you can see I've done in the below code), so I would like not to have any hardcoded titles of pictures and so on.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function(index){
tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild(img)
tryLoadImage(index++);
}
tryLoadImage(index);
Any help is very much appreciated, thank you very much!

You can make your images clickable by adding an onclick function to them. Try something like this:
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
img.onclick = e => {
// do something you want to show the full picture like this maybe
var el = document.getElementById("fullpictureid");
if (el && e.target.src) {
el.src = e.target.src;
// so that it sets "src" in <img id="fullpictureid"> for example
}
};
document.body.appendChild(img)
tryLoadImage(index++);
}

document.getElementById().src could not present images under Jquery template

I have a question of document.getElementById().src under jQuery Template.
Firstly I created an array of 5 pictures(only the first element was depicted) as showed below:
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("images/hedgehog.jpg");
Then I created a function which includes passing the src of the array to an ID(only relevant code was depicted):
document.getElementById("theQ").src = images[0].src;
The final part is the place expected to present the picture, but it didn't work:
<p style="text-align:center;" id="theQ"></p>
The navigation is correct as I could see the picture when I hover on the URL in text editor. Thank you for the help!

A paragraph is not an image. You can't attach a source to it. And it makes no sense to shadow the image constructor, just use the native one:
const img = new Image();
img.src = "images/hedgehog.jpg";
Now you can easily append that image to the dom:
document.getElementById("theQ").appendChild(img);

Since you already use jQuery in your template.
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("https://thumbs.dreamstime.com/b/woman-wearing-yellow-floral-top-116695890.jpg");
$("#theQ").append("<img src=\""+images[0].src+"\" width=\"150\" />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center;" id="theQ"></p>

I want to use a javascript variable to store an image location

I'm pretty new to coding in javascript, and am currently making pop up notifications for a website in order to give feedback to users. I have searched around a bit and know there is a way to do this, but can't get my head wrapped around it. I need to store an image location to a variable in my javascript that I can reference in my html page, enabling me to output a different icon image on my toast notification based on the type that is called (error, more info, warning, ect). This is my code so far:
<div id="toast">
<div id ="title" style="<some styling code>"></div>
<img id ="icon" style="<image style code>"/>
</div>
And my script:
function showTypeOfToast()
{
var i = document.getElementById("toast")
i.className = "showTypeOfToast";
var label = "Type Of Toast";
document.getElementById("title").innerHTML = label
var img = "imgsrc.png";
var iconElement = document.getElementById("icon");
iconElement.src = img;
}
My title element works as I expect it to, and I am wanting the image element to work in the same way.
Cheers

pass a parameter into showTypeOfToast. Pass in the type of toast you want to show.
then inside the function define something like:
if (type == warning)
iconElement.src = "warning.jpg";
else if (type == help)
iconElement.src = "help.jpg";
document.getElementById('imageId').src = 'x.jpg'; should work in any case.
or you can state:
var x = "www.yoursite.com/your-image.jpg";
var y = "www.yoursite.com/your-image2.jpg";
then document.getElementById('imageId').src = x;
and document.getElementById('imageId').src = y;
work

How to change the image a source is associated with

Is there anyway that I can put an image on my site that changes.
I know how to change the source of an image element. What I mean is like:
the image is located here
http://mywebsite.com/image.png
this doesn't change but I want the actual image to change.
More examples:
https://huggle.jdf2.org/
This site creates a bbcode element that contains the img username.png
[url=http://huggle.jdf2.org/hug/username][img]http://huggle.jdf2.org/sig/username.png[/img][/url]
This image changes depending on how many huggles you have.
How would I do this?

You can dynamically set the image source URL with:
var yourURLHere = 'ADD YOUR URL HERE';
image.src = yourURLHere;
If you want the your image to randomly change, you can use Math.random() to select a random URL from an array.
Example: Random teddy bear images (see below).
<image src="#" id="my-image"/>
Click to change image randomly.
<button id="my-btn">Change it!</button>
<script>
var imageURLs = [
'https://s-media-cache-ak0.pinimg.com/originals/4e/da/9f/4eda9f56de08463bcc18d154f654ab6d.jpg',
'http://lcdn.inthelighturns.com/media/product/e85/sweet-memories-blue-teddy-bear-urn-b83.jpg',
'https://s-media-cache-ak0.pinimg.com/originals/3c/80/3c/3c803ce72e8c0325d7ea0fcd32f81ed9.jpg',
'http://cliparting.com/wp-content/uploads/2016/07/Cartoon-teddy-bear-clipart.gif',
'http://cliparts.co/cliparts/rcn/Kox/rcnKox65i.png',
'https://s-media-cache-ak0.pinimg.com/originals/f2/d6/25/f2d6258ef0fa6de2160778066ccec832.jpg',
'https://s-media-cache-ak0.pinimg.com/236x/90/3a/6c/903a6c59c0a2f42e7d6e7cb9427a8337.jpg',
'https://s-media-cache-ak0.pinimg.com/564x/a9/ee/30/a9ee30a4f8d196a111aa5c3db7b13b6e.jpg',
'http://cdn3.volusion.com/9nxdj.fchy5/v/vspfiles/photos/BB-1433-2.jpg?1415360799'
];
var image = document.getElementById('my-image');
function pickRandomURL() {
return imageURLs[Math.floor(Math.random() * imageURLs.length)];
}
image.src = pickRandomURL();
image.width = 200;
var btn = document.getElementById('my-btn');
btn.onclick = function() {
image.src = pickRandomURL();
image.width = 200;
};
</script>

Dynamically add pictures using javascript.

I've been working on a flowchart type program that changes various parts of the html each time a new question is posed (this question is represented by the 'state' variable below), things like Title, description and images.
Currently, my HTML for the images is:
<a id="imageLink" target="_blank" href=""><img class= 'right' id= 'imageBox' style ='max-height:50%;' src='' /></a>
<h3 id ='imageBoxText' ></h3>
and the image link and the legend for the image are found in imageArray which looks something like this:
imageArray = {'questionOne': ['www.link to image.com,'Legend for image']}
In this case 'questionOne' would be 'state'.
So far, I can load a single image asynchronously using:
document.getElementById("imageBox").src = "http://www.ktcagency.com/img/loader.gif"; // load spinner
var img = new Image(); // load image asynchronously
var newsrc = imageArray[state][0];
img.onload = function () { // onload handler
document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;
I also add the description and link to the image while I'm at it:
document.getElementById("imageLink").setAttribute('href',imageArray[state][0])
document.getElementById('imageBoxText').innerHTML = imageArray[state][1];
OK, so now what I need to do is write a function that can do this for multiple images, side by side, reading from a modified imageArray that looks like:
imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}
The code should be able to handle up to three images, but I certainly wouldn't mind if it could do any more.
I tried to do it using a table to represent the images and used a for loop with the code from earlier. The image would never load, stuck on the spinner for ever and the images would all bunch up on one side of the screen.
Any help appreciated, thanks very much.

Well, I think I see what you're trying to do.
It sounds like you're trying to make a slideshow of some kind.
This is an example of how I would have done it.
Here's the jsfiddle so you can see what's going on. http://jsfiddle.net/VodkaTonic/4KWLr/
(function () {
var imageArray = {
link: [['http://i.imgur.com/7OfqRbF.jpg', 'http://i.imgur.com/AHbc6zO.jpg','http://i.imgur.com/gW144OQ.jpg'],['http://i.imgur.com/v0V8hrB.jpg', 'http://i.imgur.com/9l40vIT.png','http://i.imgur.com/ZXYUttz.png']],
label: [['Legend for image1','Legend for image2', 'Legend for image3'],['Legend for image4','Legend for image5', 'Legend for image6']]
},
doc = document,
question = 0,
img = doc.getElementsByClassName('images'),
links = doc.getElementsByClassName('links'),
label = doc.getElementsByClassName('label'),
button = doc.getElementById('button');
function add (state) {
var arr = imageArray.link[state],
arr2 = imageArray.label[state];
arr.forEach(function(value,index,array) {
img[index]['src'] = value;
links[index]['href'] = value;
});
arr2.forEach(function(value,index,array) {
label[index]['innerHTML'] = value;
});
question++;
}
window.addEventListener('load', add(question), false);
button.addEventListener('click', function () {
add(question);
}, false)
}());