Html widget doesn't work

[Tim4341]

Hai!

I'm making a website with elementor and some javascript/html codes. I used some onclick events to make a nice website. when I'm writing the code they all work, but no of the codes work when I click on the preview to see my modifications on the actual site.

do you guys know the solution?

Tim


the code i use (html and css);

<script type="text/javascript">

var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")
var buizenwarmtewisselaar = document.getElementById("buizenwarmtewisselaar")
var spiracoil = document.getElementById("spiracoil")
var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar")
var pakkingen = document.getElementById("pakkingen")
var gelaste = document.getElementById("gelaste")
var gesoldeerde = document.getElementById("gesoldeerde")
var drycooler = document.getElementById("drycooler")
var luchtwarmtewisselaar = document.getElementById("luchtwarmtewisselaar")
var voeding = document.getElementById("voeding")
var stoom = document.getElementById("stoom")
var tapwater = document.getElementById("tapwater")

buis.onclick = function(){
if(spiraal.className ==""){

spiraal.className = "hide"
plaat.className = "hide"
lucht.className = "hide"
skids.className = "hide"
buizenwarmtewisselaar.className = "show"
spiracoil.className = "show"
zwembadwarmtewisselaar.className = "show"
pakkingen.className = ""
gesoldeerde.className = ""
gelaste.className = ""
drycooler.className = ""
luchtwarmtewisselaar.className = ""
tapwater.className =""
stoom.className = ""
voeding.className = ""
} else{
spiraal.className = ""
plaat.className = ""
lucht.className = ""
skids.className = ""
buizenwarmtewisselaar.className = ""
spiracoil.className = ""
zwembadwarmtewisselaar.className = ""
pakkingen.className = ""
gesoldeerde.className = ""
gelaste.className = ""
drycooler.className = ""
luchtwarmtewisselaar.className = ""
tapwater.className = ""
stoom.className = ""
voeding.className = ""
}
};

plaat.onclick = function(){
if(spiraal.className == ""){

buis.className = "hide"
spiraal.className = "hide"
lucht.className = "hide"
skids.className = "hide"
gesoldeerde.className = "show"
gelaste.className = "show"
pakkingen.className = "show"
drycooler.className = ""
luchtwarmtewisselaar.className = ""
voeding.className = ""
tapwater.className = ""
stoom.className = ""
} else{
buis.className = ""
spiraal.className = ""
lucht.className = ""
skids.className = ""
gesoldeerde.className = ""
pakkingen.className = ""
gelaste.className = ""
drycooler.className = ""
luchtwarmtewisselaar.className = ""
stoom.className = ""
voeding.className = ""
tapwater.className = ""
}
};

lucht.onclick = function(){
if(spiraal.className == ""){

buis.className = "hide"
spiraal.className = "hide"
plaat.className = "hide"
skids.className = "hide"
pakkingen.className = ""
gesoldeerde.className = ""
gelaste.className = ""
drycooler.className = "show"
luchtwarmtewisselaar.className = "show"
stoom.className = "show"
voeding.className = ""
tapwater.className = ""

} else{
buis.className = ""
spiraal.className = ""
plaat.className = ""
skids.className = ""
pakkingen.className = ""
gesoldeerde.className = ""
gelaste.className = ""
drycooler.className = ""
luchtwarmtewisselaar.className = ""
tapwater.className = ""
voeding.className = ""
stoom.className = ""
}
};

skids.onclick = function(){
if(spiraal.className == ""){

buis.className = "hide"
spiraal.className = "hide"
plaat.className = "hide"
lucht.className = "hide"
pakkingen.className = ""
gesoldeerde.className = ""
gelaste.className = ""
luchtwarmtewisselaar.className = ""
drycooler.className = ""
voeding.className = "show"
stoom.className = "show"
tapwater.className = "show"
} else{
buis.className = ""
spiraal.className = ""
plaat.className = ""
lucht.className = ""
pakkingen.className = ""
gelaste.className = ""
gesoldeerde.className = ""
drycooler.className = ""
luchtwarmtewisselaar.className = ""
stoom.className = ""
tapwater.className = ""
voeding.className = ""
}
};
</script>


Css;

#spiraal{
opacity: 1;
}
#spiraal.hide{
opacity: 0
}

#buizenwarmtewisselaar{
opacity: 0;
}
#buizenwarmtewisselaar.show{
opacity: 1;
}

#spiracoil{
opacity: 0;
}
#spiracoil.show{
opacity: 1;
}

#zwembadwarmtewisselaar{
opacity: 0;
}
#zwembadwarmtewisselaar.show{
opacity: 1;
}

#pakkingen{
opacity: 0;
}
#pakkingen.show{
opacity: 1;
}

#gesoldeerde{
opacity: 0;
}
#gesoldeerde.show{
opacity: 1;
}

#gelaste{
opacity: 0;
}
#gelaste.show{
opacity: 1;
}

#drycooler{
opacity: 0;
}
#drycooler.show{
opacity: 1;
}

#luchtwarmtewisselaar{
opacity: 0;
}
#luchtwarmtewisselaar.show{
opacity: 1;
}

#voeding{
opacity: 0;
}
#voeding.show{
opacity: 1;
}

#tapwater{
opacity: 0;
}
#tapwater.show{
opacity: 1;
}

#stoom.show{
opacity: 1;
}
#stoom{
opacity: 0
}