Develop Reference

Is there a way to switch images src back to original after on.click src change event?

I'm a noob working my way to learn JavaScript on my own and using some resources but want to probe things on my own hence trying this thing but it's not working for some reason. Help is appreciated.
The object is to clarify some blurred images by swapping the source. The images are called zero.jpg/zeroblur.jpg, one.jpg/oneblur.jpg and so on... The page loads with blurred image sources until clicked on. I want to write code so that it goes back to original blurred source image after 5 secs.
P.S.: The code in comments is what I've tried to write on my own.
window.onload = init;
function init() {
var blurryPic = document.getElementsByTagName("img");
for (var i = 0; i < blurryPic.length; i++) {
blurryPic[i].onclick = clarify;
// setTimeout(resetPic, 5000);
}
}
function clarify(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + ".jpg";
pic.src = id;
}
// function resetPic(eventObj) {
// var pic = eventObj.target;
// var id = pic.id;
// id = "images/" + id + "blur.jpg";
// pic.src = id;
// }

It's better with CSS: your image stays the same and you only toggle a class, the class making your image blur.
document.getElementById("clickImg").addEventListener("click", function() {
this.classList.toggle("blurImg")
})
.blurImg {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">
If what you want is really to be able to reset the original image, I think it's better to stock it in a specific attribute, like this:
document.getElementById("reset").addEventListener("click", function() {
document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')
})
var imgs = [
'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',
'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',
'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg'
]
document.getElementById("random").addEventListener("click", function() {
document.getElementById("clickImg").src = imgs[Math.floor(Math.random() * 3)]
})
<input type="button" value="RESET" id="reset" />
<input type="button" value="RANDOM" id="random" /><br/>
<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" origSrc="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">

I used an if statement for this to check if the first loaded image file was present or not. Then use the attribute src for the file. Here's an example.
#javascript
function magicChanger(){
var myImage = document.getElementById("emailImage")
if (myImage.getAttribute("src") == "first loaded image"){
myImage.setAttribute("src", "second image")
}
else{
myImage.setAttribute("src", "first loaded image")
}
}
#html element
<button id = "emailButton" onclick="magicChanger()">
<img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email">
</button>

Thanks for all the answers! I wanted to get it done in JS only so CSS wouldn't work. Appreciate the answers and will definitely incorporate in future projects!
P. S. This is what got it done in the end.
window.onload = init;
function init() {
var blurryPics = document.getElementsByTagName("img");
for (var i = 0; i < blurryPics.length; i++) {
blurryPics[i].onclick = clarify;
}
function clarify(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + ".jpg";
pic.src = id;
setTimeout(reBlur, 3000, pic);
}
function reBlur(eventObj) {
var pic = eventObj.target;
var id = pic.id;
id = "images/" + id + "blur.jpg";
pic.src = id;
}

Please try this code,To Is there a way to switch images src back to original after on.click src change event?
It switches back because by default, when you click a link, it follows the link and loads the page. In your case, you don't want that. You can prevent it either by doing e.preventDefault();
$(function() {
$('.menulink').click(function(){
$("#bg").attr('src',"img/picture1.jpg");
return false;
});
});
I hope this code will be useful.
Thank You.

How to display paragraphs and images from div in order?

I am building a small web-tool where editors can write content by using buttons to add paragraphs and images. I store the elements with an id ((number of element) starting at 0 and incremented for every new element) and load with a button in order to a div "preview" where the content is supposed to be displayed as in the web page later on.
My issue is that, for a reason I don't understand, the image is always displayed below all the paragraphs instead of being in order. Presumably there is an easy fix, but I am very new to HTML, CSS and JS and couldn't find the solution online.
Sorry if this is a stupid mistake or the solution was already posted somewhere.
Javascript handling the preview rendering:
// Preview current document status
document.getElementById("previewButton").addEventListener("click", function() {
// Clear
document.getElementById("preview").innerHTML = "";
// Add all elements properly
var section = document.getElementById("preview");
var id = "preview";
for (var counter = 0; counter < element_counter; counter++) {
var type = document.getElementById(counter).nodeName;
// If text element
if (type === "TEXTAREA") {
var paragraph = document.createElement("p");
var text = document.getElementById(counter).value;
paragraph.setAttribute("id", id + counter);
paragraph.setAttribute("class", "flow-text");
paragraph.append(text);
section.appendChild(paragraph);
}
// If image element
if (type === "INPUT") {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("src", e.target.result);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
}
reader.readAsDataURL(file);
}
}
});

This might work. I can't test though without your code. However basically the principle at work is to isolate some of the vars so they represent distinct instantiations. And then immediately add the image element to the DOM. The reader.onload is expected to run asynchronously still.
enter code here if (type === "INPUT") {
(function() {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
reader.onload = function(e) {
image.setAttribute("src", e.target.result);
}
reader.readAsDataURL(file);
}());
}

Attempting to change an image onclick via PHP/Javascript/HTML

I've looked at numerous other answers regarding this but haven't found a solution that has worked. I'm using a PHP page that contains some HTML code, with Javascript working some functions. Ideally I would select an image on the page, the image will become colored green as it is selected. I would then like to deselect the image and have it return to the original state. I can only get half-way there however. What am I missing? Is it something with post back?
Here's some code examples:
The HTML:<div onclick="changeImage(1)" id="toolDiv1"><img id="imgCh1" src="/images/Tooling/1.png"></div>
The Javascript function:
function changeImage(var i){
var img = document.getElementById("imgCh" + i + ".png");
if (img.src === "images/Tooling/" + i + ".png"){
img.src = "images/Tooling/" + i + "c.png";
}
else
{
img.src = "images/Tooling/" + i + ".png";
}
}`
The "1c.png" image is the one that is selected and should replace "1.png". There are multiple divs on this page that hold multiple images, which are named 2/2c, 3/3c, which is why the var i is included. Any insight? Thanks in advance.

You could do it something like this, it would also allow for different file names.
<img class="selectable" src="/images/Tooling/1.png"
data-original-source="/images/Tooling/1.png"
data-selected-source="/images/Tooling/1c.png">
<img class="selectable" src="/images/Tooling/2.png"
data-original-source="/images/Tooling/2.png"
data-selected-source="/images/Tooling/2c.png">
 
var images = document.getElementsByClassName('selectable');
for (var image of images) {
image.addEventListener('click', selectElementHandler);
}
function selectElementHandler(event) {
var image = event.target,
currentSrc = image.getAttribute('src'),
originalSrc = image.getAttribute('data-original-source'),
selectedSrc = image.getAttribute('data-selected-source'),
newSrc = currentSrc === originalSrc ? selectedSrc : originalSrc;
image.setAttribute('src', newSrc);
}
 
With comments:
// find all images with class "selectable"
var images = document.getElementsByClassName('selectable');
// add an event listener to each image that on click runs the "selectElementHandler" function
for (var image of images) {
image.addEventListener('click', selectElementHandler);
}
// the handler receives the event from the listener
function selectElementHandler(event) {
// the event contains lots of data, but we're only interested in which element was clicked (event.target)
var image = event.target,
currentSrc = image.getAttribute('src'),
originalSrc = image.getAttribute('data-original-source'),
selectedSrc = image.getAttribute('data-selected-source'),
// if the current src is the original one, set to selected
// if not we assume the current src is the selected one
// and we reset it to the original src
newSrc = currentSrc === originalSrc ? selectedSrc : originalSrc;
// actually set the new src for the image
image.setAttribute('src', newSrc);
}

Your problem is that javascript is returning the full path of the src (you can try alert(img.src); to verify this).
You could look up how to parse a file path to get the file name in javascript, if you want the most robust solution.
However, if you're sure that all your images will end in 'c.png', you could check for those last 5 characters, using a substring of the last 5 characters:
function changeImage(var i){
var img = document.getElementById("imgCh" + i);
if (img.src.substring(img.src.length - 5) === "c.png"){
img.src = "images/Tooling/" + i + ".png";
}
else
{
img.src = "images/Tooling/" + i + "c.png";
}
}

How to set error image for all images on page?

I would like to show my own error image when an image cant load successfully.
I thought of a JavaScript function:
<script type="text/javascript">
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].onerror = onErrorImage(images[i]);
}
function onErrorImage(element){
element.onerror = null;
element.src = 'errorImage.png';
}
</script>
But this doesn't work. This turns every image on the page into my own error image.
Is there another simple way to show my own error image on error?
Or is there another way to bind a function to an event like i did on line 4? Because I'm pretty sure the script fails on that line.
Solution may be in jQuery.

It should be i guess:
images[i].onerror = function(){onErrorImage(this);}

There are a lot of ways to do this, I will show you one of them :
You can make all of your images with "fake-src" and load them when the document is ready. Of course you can make a loader till they are downloading.
Here is a function I write for you:
imagesReady = function () {
var myImgs = document.getElementsByTagName("img");
for (var i = 0; i < myImgs.length; i++) {
getImageReady(myImgs[i]);
};
function getImageReady(el) {
var url = el.getAttribute("src-fake");
var image = document.createElement("img");
image.onload = function() {
el.src = url;
el.style.opacity = 1;
//this image is ok, that why we put his src to be the fake src
};
image.onerror = function (err) {
console.log("err on load :"+image.src);
el.src = url;
//this image fail!
}
image.src = url;
}
}
imagesReady();

Smilie system: Event to add image in textarea fails

I'm trying to create a personalized smilies system to train my JavaScript.
To accomplish that I have an offline system to save the various user smilies (I only save the urls).
After obtaining the data I try to make them appear above the textarea I want. So far so good!
Now, the problem comes when it's time to add the events to the images.
I try to add event listeners to each image but no matter which image I press only the last image event is triggered.
This is: all images appear side by side correctly but what is inserted in the textarea is the last image that is iterated in the cycle.
Meaningful code:
/* Insert the code in the right place in the textarea*/
function putInTxtarea(text, textarea) {
// Mozilla text range replace.
if (typeof(textarea.selectionStart) != "undefined") {
var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;
textarea.value = begin + text + end;
if (textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else {
textarea.value += text;
textarea.focus(textarea.value.length - 1);
}
var elem = document.createElement("div");
elem.id = "mySmilies";
elem.innerHTML = "";
for each (url in smiliesUrl){
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
img.addEventListener('click',
function(){putInTxtarea('[img]'+url+'[/img]', document.getElementsByName('message')[0]);
};, false); // here is the event attaching
elem.appendChild(img);
}

Don't use for each...in. This is a construct only available in Firefox (at least it is non-standard).
You are making the typical creating-a-function-in-a-loop mistake. JavaScript has only function scope. Every function you create in the loop has references to the same variables (url in your case) and this variable will have the value of the last URL after the loop finished. You need to introduce a new scope:
function createClickHandler(url) {
var target = document.getElementsByName('message')[0];
return function() {
putInTxtarea('[img]'+url+'[/img]', target);
}
}
// assuming smiliesUrl is an array
for(var i = smiliesUrl.length;i--;) {
var url = smiliesUrl[i];
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
img.addEventListener('click', createClickHandler(url), false);
elem.appendChild(img);
}
Another possible is to simply access the image from the event handler. It should available via this:
img.addEventListener('click', function(){
putInTxtarea('[img]'+this.src+'[/img]',
document.getElementsByName('message')[0]);
};, false);

This seams to be a closure issue. the variable url points to the url used in the loop, and at the time of execution it is always be the last url.
for(url in smiliesUrl){
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
var func = function(jUrl){
return function(){
putInTxtarea('[img]' + jUrl + '[/img]',
document.getElementsByName('message')[0]);
};
}(url);
img.addEventListener('click', func, false);
}
For more on closures in javascript see This question