0

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)); 
}   
1
  • 1
    Podes mostrar o HTML (ou função) que chama addToCartClicked? Queria juntar uma resposta com um exemplo.
    – Sergio
    Commented 28/04/2020 às 18:24

1 Resposta 1

2

Vou supor que você esta recebendo undefined para os botões que acrescentou como código HTML de sua pergunta, isso porque seu código não possui os elementos com as classes product_name e price que também geram undefined se executarmos o código com esta.

Considerando que está se referindo aos botões, o problema é que você está realizando sua pesquisa com o seguinte código:

var size = document.getElementById('clicked_size_button')[0].innerText

Observe que você está usando a função getElementById para procurar seu elemento, mas não existe nenhum botão com o Id em questão, use getElementsByClassName para realizar a busca:

var size = document.getElementsByClassName('clicked_size_button')[0].innerText

Sobre o localstorage aconselho abrir uma pergunta específica para isso e abordar em mais detalhes a situação.

Uma observação interessante ressaltada nos comentários é a propriedade Element.classList. Essa propriedade retorna uma lista contendo as classes de determinado elemento, além de fornecer acesso a funções de inclusão e remoção de classes dentre outras funcionalidades úteis quando trabalhamos com classes.

Quando sobrescrevemos a propriedade className como esta sendo feito em seu código, sobrescrevemos todas as classes deste elemento, note que você pode ter mais de uma classe vinculada a um elemento e querer remover ou incluir apenas uma classe especifica.

Você poderia editar sua função SizeButtonStyle para tirar proveito deste recurso, neste caso seu código seria semelhante ao código abaixo:

function SizeButtonStyle(el) {
    const lastItem = document.getElementsByClassName('clicked_size_button');
    if (lastItem.length > 0) {
        lastItem[0].classList.add("unclicked_size_button");
        lastItem[0].classList.remove("clicked_size_button");
    }

    el.classList.add("clicked_size_button");
    el.classList.remove("unclicked_size_button");
}
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .