I'm total begginer, so answer may be really simple, but i can't seem to find it.
I have trouble with button animation i made with JS stopping working after triggering onclick with html. I think it may be because buttons count as two different elements and my animation is working on id but i'm not sure, and if yes then i dont really know how to solve that, i already tried few things like changing id to class and adjusting rest of the code for it, though then my animation stopped working at all.
There is code:
JS:
function zmienrozm(){
var elem = event.currentTarget.id;
if(elem == "leftbut"){
butonL.classList.add("buthover");
butonR.classList.add("notbuthover");
}
if(elem == "rightbut"){
butonR.classList.add("buthover");
butonL.classList.add("notbuthover");
}
};
function normrozm(){
var elem = event.currentTarget.id;
if(elem == "leftbut"){
butonL.classList.remove("buthover");
butonR.classList.remove("notbuthover");
}
if(elem == "rightbut"){
butonR.classList.remove("buthover");
butonL.classList.remove("notbuthover");
}
}
function wybLog(){
str.innerHTML = `
<div id=\"formu\">
<form action=\"\" method=\"post\">
<button onclick=\"wybLog()\" id=\"leftbut\" class=\"buts\">Login</button><button onclick=\"wybRej()\" id=\"rightbut\" class=\"buts\">Rejestracja</button>
</form>
</div>
<br>log
`;
var butonL = document.getElementById("leftbut");
var butonR = document.getElementById("rightbut");
butonL.addEventListener("mouseover", zmienrozm, false);
butonR.addEventListener("mouseover", zmienrozm, false);
butonL.addEventListener("mouseout", normrozm, false);
butonR.addEventListener("mouseout", normrozm, false);
};
function wybRej(){
str.innerHTML = `
<div id=\"formu\">
<form action=\"\" method=\"post\">
<button onclick=\"wybLog()\" id=\"leftbut\" class=\"buts\">Login</button><button onclick=\"wybRej()\" id=\"rightbut\" class=\"buts\">Rejestracja</button>
</form>
</div>
<br>rej
`;
if(uzytk.length != 0){
alluzytk.push(uzytk)
localStorage.setItem("alluzytk", JSON.stringify(alluzytk));
}
var butonL = document.getElementById("leftbut");
var butonR = document.getElementById("rightbut");
butonL.addEventListener("mouseover", zmienrozm, false);
butonR.addEventListener("mouseover", zmienrozm, false);
butonL.addEventListener("mouseout", normrozm, false);
butonR.addEventListener("mouseout", normrozm, false);
};
switch(strona){
case "1":
console.log(strona);
str.innerHTML = "<br>pop<br>";
break;
case "2":
console.log(strona);
str.innerHTML = "<br>cat<br>";
break;
case "3":
console.log(strona);
const wybLR = 0;
str.innerHTML = `
<div id=\"formu\">
<form action=\"\" method=\"post\">
<button onclick=\"wybLog()\" id=\"leftbut\" class=\"buts\">Login</button><button onclick=\"wybRej()\" id=\"rightbut\" class=\"buts\">Rejestracja</button>
</form>
</div>
`;
var butonL = document.getElementById("leftbut");
var butonR = document.getElementById("rightbut");
butonL.addEventListener("mouseover", zmienrozm, false);
butonR.addEventListener("mouseover", zmienrozm, false);
butonL.addEventListener("mouseout", normrozm, false);
butonR.addEventListener("mouseout", normrozm, false);
break;
case "4":
console.log(strona);
str.innerHTML = "<br>twor<br>";
break;
default:
console.log(strona);
str.innerHTML = "<br>main<br>";
break;
}
CSS:
.buts{
font-family: "Comic Sans MS", "Comic Sans", cursive;
background-color: rgb(113, 136, 211);
border: none;
width: 50%;
padding: 1%;
text-align: center;
text-decoration: none;
transition: 0.35s;
}
.buthover{
font-family: "Comic Sans MS", "Comic Sans", cursive;
background-color: rgb(77, 94, 150);
color:rgb(218, 218, 218);
width: 55%;
border: none;
padding: 1%;
text-align: center;
text-decoration: none;
}
.notbuthover{
font-family: "Comic Sans MS", "Comic Sans", cursive;
background-color: rgb(113, 136, 211);
border: none;
width: 45%;
padding: 1%;
text-align: center;
text-decoration: none;
transition: 0.35s;
}
