0

I've so tried so many different ways of writing this out and getting my new image url different ways but nothing has seemed to work. I just want to be able to change an image when you click a different image. When the page loads, I have the initial image set to hidden until you press the button to see it. I can't have the image showing until you press the button cause it's a customizable product type of thing. Everything in the 'addEventListener' is working accept for the image change and here's my code - all of the variables I declared are image elements nested inside divs accept for the booleans at the top which I haven't used yet. Like the question says, I'm working in webflow in the custom code section. Thanks for any help!

<script>

// THESE DID NOT WORK

// layer1.src = "new image url";
// layer1.setAttribute('src', 'new image url');

let layer1isAv = true;
let layer2isAv = true;
let layer3isAv = true;
let layer4isAv = true;
let layer5isAv = true;

let layer1 = document.getElementById("layer1");
let layer2 = document.getElementById("layer2");
let layer3 = document.getElementById("layer3");
let layer4 = document.getElementById("layer4");
let layer5 = document.getElementById("layer5");

let doubleNotched = document.getElementById("doubleNotchedImage");
let doubleSharp = document.getElementById("doubleSharpImage");
let doubleStraight = document.getElementById("doubleStraightImage");
let duoNotched = document.getElementById("duoNotchedImage");
let duoSharp = document.getElementById("duoSharpImage");
let duoStraight = document.getElementById("duoStraightImage");
let classicNotched = document.getElementById("classicNotchedImage");
let classicSharp = document.getElementById("classicSharpImage");
let classicStraight = document.getElementById("classicStraightImage");
let classicCurved = document.getElementById("classicCurvedImage");


// Double notched image clicked => changes 'lastSelected' and runs main function

doubleNotched.addEventListener('click', (event) => {
    alert("clicked double notched");
    showSelected();
});


// Main function that changes the images

function showSelected() {
// this is working
layer1.style.display = "inline-block";
// this is not
layer1.src = "file:///Users/nicholasmoore/Desktop/enmo/main%20workbench%20image%20files/RENDERS/oliveDoubleNotchedInside.png";
//layer1.src = "https://uploads-ssl.webflow.com/5f60781680444b714c653f8b/5faf1a4817630673a3e47368_whiskeyDoubleNotchedInside.png";
};

</script>
nicholomo
  • 1
  • Is `layer1` an `img` element? Without seeing your HTML it's hard to help as `.src = 'new.url'` works. – pilchard Nov 15 '20 at 09:10
  • @pilchard yes `layer1` is an `img` element. Since this is custom code in webflow, I have already added all of my elements without having to code in html. I can assign ID's, classes and tags to any element in the user interface of webflow so that I can reference them in a custom code area. – nicholomo Nov 15 '20 at 10:04
  • I see, have you tried debugging in the console or browsing the source? I would guess that webflow is nesting your img element somehow. – pilchard Nov 15 '20 at 10:12
  • Yea I can see the html that webflow makes and it looks exactly like your first comment which is why I'm very confused. I did however find a different way of achieving the same thing. I don't know why the image `src` won't change so instead, I changed the image element to a `div` block and added a background image. For some reason I'm able to change the `src` of the background image and not the actual image. I also set the height of this `div` to 100% of its container so it looks like its a normal `img` element. I don't have a clue why this is, but I'll take it! Thanks for reaching out Pilchard – nicholomo Nov 15 '20 at 20:39

0 Answers0