Problem with javascript function uses class

Question

So I have a function in javascript that changes the class of an object and then later I try to look for that object in another function with the new class , but that doesn’t happen and gives me a Undefined object .. I would like to know what was wrong if it was not too inconvenient, besides that also someone could give me some hint about , when I use the localstorage if it is possible to keep adding a higher key value than I already have ? Thank you!

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)); 
}   

Answer 1

I’ll assume you’re getting undefined for the buttons you added as HTML code of your question, this is because your code does not have the elements with the classes product_name and price that also generate undefined if we execute the code with this.

Whereas you are referring to the buttons, the problem is that you are performing your research with the following code:

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

Note that you are using the function getElementById to search for its element, but there is no button with the id in question, use getElementsByClassName to carry out the search:

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

About the localstorage advise to open a specific question for this and address in more detail the situation.

An interesting observation highlighted in the comments is the property Element.classList. This property returns a list containing the classes of a given element, in addition to providing access to class inclusion and removal functions among other useful features when working with classes.

When we overwrite the property className as this being done in your code, we overwrite all classes of this element, note that you may have more than one class linked to an element and want to remove or include only one specific class.

You could edit your function SizeButtonStyle to take advantage of this feature, in this case your code would be similar to the code below:

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");
}