Develop Reference

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?

You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');

You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

Load default image when error dynamic image

I need to load a default image in the event that the image is broken. This also needs to apply to dynamic images. Always limited by class.
I found a similar question Jquery on image error not working on dynamic images? but it doesn't seem to work for dynamic images in my case
DEMO https://jsfiddle.net/sb8303aq/1/
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
});

you can put error function into append function.
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
$('img').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://image_doesn-t_exist_url" class='myClass' />
<p>
<button>
Add Image
</button>
</p>

How To Change Image And Link On Click As Toggle Function?

I want a Pure JavaScript code that will change an image and also its link to another image and another link on same place as toggle function. I have a web page and I have Anchors Links button as <img src="DownArrow.png"/> and I want that after clicking on this image, first it will lead you to the DIV2 and then it will change the code to <img src="UpArrow.png"/>. How to do this using pure JavaScript? Waiting for perfect reply and code?

This should work:
var link = document.querySelector('#arrow a');
link.onclick = function() {
var image = document.querySelector('#arrow a img');
if(this.href.slice(-1) === '1') {
this.href = '#DIV2';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
} else {
this.href = '#DIV1';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
}
}
See it in action here: http://jsfiddle.net/TM9ap/7/
Note that I've changed the href attribute in the link to #DIV1 like this <a href="#DIV1">

<!DOCTYPE html>
<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me
<img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>
<div id="DIV2" ></div>
<script>
function execute()
{
if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","DownArrow.png");
img.parentNode.setAttribute("href","#DIV2");
}
else
{
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","UpArrow.png");
img.parentNode.setAttribute("href","#DIV1");
}
}
</script>
</body>
</html>

javascript code is only working with mozzila firefox?

On my website, I have an image viewer. Every time the user click the left or right button the url of the page will be changed aromatically. The image src uses a specific number from the url of the current page (the only number in the url). Below I have provided the code I am using. The code is working perfectly, but it is only working on mozilla firefox. How can I fix it in order to make it work for all browsers. The problem on the other browsers is that the image do not show up.
<img src="" id="image" >
<script type="text/javascript">
document.getElementById('image').src ="Images/"+location.href.match(/\d+/)+".jpg";
<br/>
document.wrriteln(location.href.match(/\d+/)+".jpg");
</script>
<br/>
<script>
var url = location.href;
function nextImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) + 1) + p2);
}));
}
function prevImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) - 1) + p2);
}));
}
</script>
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>

What you should do is
<a href="#" id="prevImageControl">
and in the javascript block do
prevImageClick = function()
{
window.location.href = prevImage();
}
var prevImageControl = document.getElementById('prevImageControl');
prevImageControl.addEventListener('click', prevImageClick);
repeat for nextImage()

You need to change these:
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
To onclick events.
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
Or better still, put them into functions.

you have a double r in document.wrriteln

trying to create simple Slide show method in Javascript

I have been trying to create a basic JavaScript snipped to slide images forward and back on a webpage when links are clicked.
Here is my js code in the <head> section of the webpage:
<script type="text/javascript">
//if browser does noe support getElementbyId then exit
var step = 1;
if ( !document.getElementById ) {
return;
}
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
function slideForward()
{
//files are named as image1, image2....
step++;
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
}
function slideBack()
{
step--;
var src = 'images/gallery_images/image'+step'.jpg';
document.getElementById('photos').src = src;
}
</script>
I bind the 2 functions for moving backwards using onclick in a tag like:
<a onclick="slideBack()">
<img src="images/gallery_06.jpg" alt="" name="left" width="26" height="90" id="gallery_06" />
</a>
<a onclick="slideForward()">
<img src="images/gallery_07.jpg" alt="" name="right" width="27" height="90" id="gallery_07" />
</a>
Any suggestions on what I am missing? Nothing is being returned.