T
Tim4341
New Member
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
}
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
}