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