Skip to main content
1 de 2

Problema com função do javascript usa class

Então eu tenho uma função no javascript que muda a class de um objeto e depois mais tarde tento procurar esse objeto noutra função com a nova classe , mas tal não se sucede e da me um objeto undefined .. gostaria de saber o que estava a fazer mal se nao fosse muito inconveniente, alem disso também alguém me poderia dar alguma dica sobre , quando uso o localstorage se é possível ir adicionando sempre mais um valor key mais alta que ja la tenho ? Obrigado!

Html :

     <button id="xs" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XS</b></button>
                <button id="s" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>S</b></button>
                <button id="m" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>M</b></button>
                <button id="l" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>L</b></button>
                <button id="xl" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XL</b></button>

JavaScript:

       function SizeButtonStyle(el) {

        var size = el    
            
             
             if(el.id == 'xs'){
                document.getElementById('xs').className = "clicked_size_button";
                document.getElementById('s').className = "unclicked_size_button";
                 document.getElementById('m').className = "unclicked_size_button";
                 document.getElementById('l').className = "unclicked_size_button";
                 document.getElementById('xl').className = "unclicked_size_button";
                 
                 
             }
              if(el.id == 's'){
              document.getElementById('xs').className = "unclicked_size_button";
                document.getElementById('s').className = "clicked_size_button";
                 document.getElementById('m').className = "unclicked_size_button";
                 document.getElementById('l').className = "unclicked_size_button";
                 document.getElementById('xl').className = "unclicked_size_button";
             }
              if(el.id == 'm'){
                document.getElementById('xs').className = "unclicked_size_button";
                document.getElementById('s').className = "unclicked_size_button";
                 document.getElementById('m').className = "clicked_size_button";
                 document.getElementById('l').className = "unclicked_size_button";
                 document.getElementById('xl').className = "unclicked_size_button";
             }
              if(el.id == 'l'){
                document.getElementById('xs').className = "unclicked_size_button";
                document.getElementById('s').className = "unclicked_size_button";
                 document.getElementById('m').className = "unclicked_size_button";
                 document.getElementById('l').className = "clicked_size_button";
                 document.getElementById('xl').className = "unclicked_size_button";
             }
              if(el.id == 'xl'){
                document.getElementById('xs').className = "unclicked_size_button";
                document.getElementById('s').className = "unclicked_size_button";
                 document.getElementById('m').className = "unclicked_size_button";
                 document.getElementById('l').className = "unclicked_size_button";
                 document.getElementById('xl').className = "clicked_size_button";
             }

}

    function addToCartClicked(event){



var product = document.getElementsByClassName('product_name')[0].innerText
var price = document.getElementsByClassName('price')[0].innerText
var size = document.getElementById('clicked_size_button')[0].innerText
var info = [product,size,price];
localStorage.setItem(1, JSON.stringify(info));

}