0

Pretty new to Javascipt.

Using a form with on top of the form a image. If they change an option in one of the eight dropdown boxes the image will change. However, if they make a configuration that doesn't exsist, the image is not found and the standard broken imagelink will be displayed.

Is there a way to check when I'm changing a value and trigger the onChange="swapImage()"from a dropdown to trigger an event to check if image exsists, and if not, replace it with an error image?

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var hoogte = document.getElementById("hoogte").value;
    var bt = document.getElementById("bt").value;
    var fase = document.getElementById("fase").value;
    var aardlek = document.getElementById("aardlek").value;
    var kook = document.getElementById("kook").value;
    var groepen = document.getElementById("groepen").value;
    var merk = document.getElementById("merk").value;

    image.src = "http://www.groepenkasten.expert/images/" + merk + "/" + hoogte + "_"  + bt + "_"  + fase + "_" + aardlek + "_" + kook + "_" + groepen +".gif";
};

Because the image is Dynamic, there is no full page reload,. Therefore it will not detect the error that the broken image produce when the image doesn't exsist.

Link to the form: http://www.groepenkasten.expert/meld-uw-storing/kant-en-klare-groepenkasten

Michiel Visser
  • 1
  • 1
  • Possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) – Patrick Evans Jan 22 '16 at 19:45
  • Welcome to Stack Overflow. Why did you include the `JQuery` tag when this is all native JavaScript? I would advise that you create a variable to store the string in and then send it to console to see what the string is being created as. – Twisty Jan 23 '16 at 00:10
  • @Twisty: Because maybe there is better way to achieve this with Jquery. – Michiel Visser Jan 23 '16 at 11:48
  • @Patrick: I tried that, but since the image is only Dynamic changed, by the script you advised isn't working because the page isn't reloading. The function imgError(image) is only triggered on a full page reload. Since the image is Dynamic created by the Javascript, this isn't working. Is it possible to fire a second funtion if image=error then src="x.gif"? – Michiel Visser Jan 23 '16 at 11:53
  • Load the image into a ghost/hidden element, and listen to the `onError` event. – Terry Jan 23 '16 at 12:07
  • Are you sure you implemented it correctly? Works [on this fiddle](https://jsfiddle.net/dvLb39pv/) without needing to reload the page – Patrick Evans Jan 23 '16 at 13:54
  • @ Patrick: Tried your way, couldn't get it working. Your example is changing folder, right? See my fiddle https://jsfiddle.net/12digit/dvLb39pv/1/ – Michiel Visser Jan 23 '16 at 19:14

0 Answers0