FROM CACHE - en_header

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

NoahOnyejese
Excursionist
29 0 6

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:

 

 

<form>
    <input type="radio" value="s1"></input>
    <input type="radio" value="s2"></input>
    <input type="radio" value="s3"></input>
    <input type="radio" value="s4"></input>
    <input type="radio" value="s5"></input>
    <input type="radio" value="s6"></input>
    <br>
    <div class="main"></div>
</form>

 

 

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.

Replies 2 (2)
NARESH_KANSARA
Shopify Partner
1 0 0

@NoahOnyejese  Need to use liquid sentence  

NoahOnyejese
Excursionist
29 0 6

I don't fully understand please explain.