Why is this code working on my desktop but not on shopify

Store Design
,
1

Hi guys,

Lately, I’ve been trying to code something on Shopify, after first coding it on my coding application I tested it on my Live server and it worked perfectly fine.

Unfortunately, I tried it on Shopify but with no success.

I don’t know why but maybe one of you experts might know why it doesn’t work.

HTML:

CSS:

.main {
        background-color: transparent;
        border: 1px solid white ;
        width: 50px;
        height: 50px;
        text-align: center;
    }

    .main.color1 {
        background: blue;
    }

JS:

const form = document.querySelector('form');
const color = document.querySelectorAll('.main');

document.querySelector('form').addEventListener('change', function(e) {

  let colorCodeD = [...form.querySelectorAll('input[type=radio]:checked')].map(elementD => elementD.value).join('');

  color.forEach(elementD => {
    elementD.classList.toggle('color1', colorCodeD === 's1');
  })
  console.log(colorCodeD);
});

I compressed it to make it more understandable and simple. Please Help me I’ve been stuck forever on this on. haha.

2

@NoahOnyejese Need to use liquid sentence

3

I don’t fully understand please explain.