Parse value of option into html attribute

Question

I'm currently trying to make a ecommerce website that uses selly.io. But I recently got stuck on trying to change the product ID ( thats used to tell selly.io what the user is buying ) depending on the size of the product they want to buy.

This is the part of the code I'm talking about:

<div class="col-md-6 col-lg-5 p-b-30">
    <div class="p-r-50 p-t-5 p-lr-0-lg">
    <h4 class="mtext-105 cl2 js-name-detail p-b-14">
        Hoodie
    </h4>

    <span class="mtext-106 cl2">
        €50,00
</span>
    <p class="stext-102 cl3 p-t-23">Nulla eget sem vitae eros pharetra viverra. Nam vitae luctus ligula. Mauris consequat ornare feugiat.
    </p>

    <div class="p-t-33">
        <div class="flex-w flex-r-m p-b-10">
            <div class="size-203 flex-c-m respon6">
                Size
            </div>
            <div class="size-204 respon6-next">
                <div class="rs1-select2 bor8 bg0">
                <select class="js-select2" name="time">
                    <option>Choose an option</option>
                    <option>Size S</option>
                    <option>Size M</option>
                    <option>Size L</option>
                    <option>Size XL</option>
                </select>
                <div class="dropDownSelect2"></div>
            </div>
        </div>
    </div>
    <div class="flex-w flex-r-m p-b-10">
        <div class="size-203 flex-c-m respon6">
            Color
        </div>
        <div class="size-204 respon6-next">
            <div class="rs1-select2 bor8 bg0">
                <select class="js-select2" name="time">
                    <option>Choose an option</option>
                    <option>Blue</option>
                    <option>White</option>
                    <option>Grey</option>
                </select>
                <div class="dropDownSelect2"></div>
            </div>
        </div>
    </div>

    <div class="flex-w flex-r-m p-b-10">
        <div class="size-204 flex-w flex-m respon6-next">
            <div class="wrap-num-product flex-w m-r-20 m-tb-10">
                <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
                </div>

                <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product" value="1">
                <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
                </div>
            </div>

            <button data-selly-product="3cffe13b" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button>
        </div>
    </div>  
</div>

I am trying to change this id:

<button data-selly-product="3cffe13b"

Depending on what the user selects here:

<select class="js-select2" name="time">
    <option>Choose an option</option>
    <option>Size S</option>
    <option>Size M</option>
    <option>Size L</option>
    <option>Size XL</option>
</select>

I've tried parsing the option selected option to a javascript variable called value:

<div class="size-204 respon6-next">
    <div class="rs1-select2 bor8 bg0">
        <script type="text/javascript">
            function getComboA(selectObject) {
                var value = selectObject.value;  
            }
        </script>
        <select class="js-select2" name="time" id="comboA"onchange="getComboA(this)">
            <option value="">Choose an option</option>
            <option value="3cffe13b">Size S</option>
            <option value="M">Size M</option>
            <option value="L">Size L</option>
            <option value="XL">Size XL</option>
        </select>
        <div class="dropDownSelect2"></div>
    </div>
</div>

Then storing that value in a cookie:

<script type="text/javascript">
    $(document).ready(function () {
        createCookie("value", value, "1");
    });

    function createCookie(name, value, days) {
        var expires;
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
    }
</script>

To then make that value be echoed in the data-selly-product:

<button data-selly-product="<?php if(isset($_COOKIE["value"])) echo $_COOKIE["value"]; ?>" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">Add to cart</button>

Answer 1

To just set the data-selly-product attribute of the button you have to use the .dataset property. Quoting from the link:

The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.

function getComboA(selectObject) {
  const button = document.querySelector('button.js-addcart-detail');
  button.dataset.sellyProduct = selectObject.value;
  console.log(button);
}

<select class="js-select2" name="time" id="comboA" onchange="getComboA(this)">
  <option value="">Choose an option</option>
  <option value="3cffe13b">Size S</option>
  <option value="M">Size M</option>
  <option value="L">Size L</option>
  <option value="XL">Size XL</option>
</select>

<button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button>

Instead of using a onchange attribute, I'd suggest moving this to a separate file and use a listener instead. This allows you to better separate logic from presentation and you can add multiple listeners to the same element. You only have to make a small adjustement in t he code:

document.getElementById('comboA').addEventListener('change', function() {
  const button = document.querySelector('button.js-addcart-detail');
  button.dataset.sellyProduct = this.value; // `this` is the element receiving the event
});