Jump to content

Adding event listener to a button to change a section's background picture

Recommended Posts

Posted (edited)

Hi, I currently have a side where I am having the user edit/configure their own home. I want for a button to display which specific model they are picking, and according to what model is picked, I want to change the background picture of the section on the left side. It currently has a white background png. I tagged the current page that I am working on. 

I tried some JS, but not sure if I am missing something?

Here is what I have. The current url is the picture which I want to upload.

document.addEventListener("DOMContentLoaded", function() {
  var button = document.querySelector('#block-yui_3_17_2_1_1715720969210_49358');
  button.onclick = function() {
    var section = document.querySelector('section[data-section-id="6642cac4e9abab7cc0dd30e9"]');
    section.style.backgroundImage = 'url("https://images.squarespace-cdn.com/content/5e4b3cfd445a6a5feb18f718/280d80b6-32e3-4028-aeda-4c4fa9eb5527/Samara+sample.png?content-type=image%2Fpng")';

Website page link:

Edited by Alek
Link to comment
  • Replies 3
  • Views 249
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted (edited)

Hi Alek, You your idea seems great but any of the buttons, colors and setting don't work. How would like work that? I think there are lot of thing to be work on and you will need a developer who may built that for you. I am not sure, your script will work here. Because there are lot more custom code need to be written. 

Edited by DavidStewart
Link to comment

I am a developer. I am simply just trying to access the background element in the dom tree. Is this not possible using squarespace? Would I have to build the website from scratch?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.