Alek

here is the link to that specific page. https://www.luctorcompany.com/design-your-home

I am trying to access the background property of a specific section. In this case, I want to access the background property on the left section of my page. There is currently a placeholder image that I have set up, but I want that image to change if the user presses on a button on the right side. This is the current code I have on the button titled "Model 2" . When I click on the Model 2 button, I get no error in the browser console, and it seems to be that the background image only turns a bit dark. I am not sure if im just not accessing the right ID for the section, or if im doing something wrong. Using ID finder, the ID for the left section is: section[data-section-id="6642cac4e9abab7cc0dd30e9"]. I have also querySelecting this into the mainSection but the console would output that the id couldnt be found. I simply just need to be able to access the DOM element that will allow me to change the background image of that section. <button id='model-2-button'>Model 2</button> <script> document.addEventListener('DOMContentLoaded', function() { const buttonTwo = document.querySelector('#model-2-button'); const mainSection = document.querySelector('.section-border'); buttonTwo.addEventListener('click', function(event){ event.preventDefault(); buttonTwo.textContent = "Button clicked"; if (mainSection) { const mainSectionImg = mainSection.querySelector('.section-background img'); if (mainSectionImg) { // Adding a cache-busting query parameter to force image reload const newSrc = 'https://images.squarespace-cdn.com/content/v1/5e4b3cfd445a6a5feb18f718/88a13f9c-57b4-4ffa-98e6-712593ba556d/test1.jpg?timestamp=' + new Date().getTime(); mainSectionImg.src = newSrc; // Force reload by removing and re-adding the image const parent = mainSectionImg.parentNode; parent.removeChild(mainSectionImg); parent.appendChild(mainSectionImg); } else { console.error('Image element not found in the targeted section'); } } else { console.error('Section with class "section-border" not found'); } }); }); </script> <style> #model-2-button { color: black; background: white; border: 1px solid rgb(225, 222, 218); cursor: pointer; border-radius: 15px; transition: border 0.5s ease 0s; padding: 12px 40px; width: 327px; } #model-2-button:hover { border-color: black; } </style>

This is some inspo on how I want the website to react. https://www.abodu.com/configurator?model=Abodu Studio

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?

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: https://www.luctorcompany.com/design-your-home