So, I’m trying to develop a sort of visual novel, and I’m trying to make a code to replace other images when a specific image appears, (for example, if “happy” is onscreen i want “sad” to be hidden so the pictures don’t overlap eachother)
Here’s my code:
<style>
section {
display: none;
}
.d-block {
display: block;
}
</style>
<section class="d-block">Horace</section>
<section>Ursa</section>
<section><img id=sad src=https://png.pngtree.com/png-clipart/20220716/ourmid/pngtree-banana-yellow-fruit-banana-skewers-png-image_5944324.png></section>
<section><img id=neutral src=https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg></section>
<section><img id=happy src=https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg></section>
<section>Thus</section>
<button>Next</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
const TextShower = document.querySelector('button');
TextShower.addEventListener('click', function() {
let hidden_section = document.querySelector('section:not(.d-block)');
if (hidden_section != null) {
hidden_section.classList.add('d-block');
} else {
TextShower.disabled = true;
}
});
const Happy = document.getElementById("happy")
if (happy.hasAttribute("d-block")) {
document.getElementById("sad","neutral").removeAttribute("d-block")
}
});
</script>
const Happy = document.getElementById("happy")
if (happy.hasAttribute("d-block")) {
document.getElementById("sad","neutral").removeAttribute("d-block")
}
});
this is the if statement i tried to create to replace the portraits. did not work