I am new to twine, and have very little experience with html/javascript. I have been searching all day but no solutions that seem to be working for others is working for me. I must be missing something or doing something wrong. If anyone can help that would be great. Here is some of my code.
This is in the Story JavaScript
setup.roll = function () {
var x = document.getElementsByClassName('gdice16')[0];
if (x.style.visibility === "visible") {
x.style.visibility = "collapse";
} else {
x.style.visibility = "visible";
}
};
Here is a snippet of my passage. (removed img src links)
src="/greendice11.png" class="gdice11">
<img src="/greendice12.png" class="gdice12">
<img src="/greendice13.png" class="gdice13">
<img src="/greendice14.png" class="gdice14">
<img src="/greendice15.png" class="gdice15">
<img src="/greendice16.png" class="gdice16">
Then I have this is my passage.
<<button "Test">><<script>>setup.roll();<</script>><</button>>
My Story Stylesheet has a bunch of images that im using, but here is a snippet.
.gdice11 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
.gdice12 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
.gdice13 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
.gdice14 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
.gdice15 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
.gdice16 {
position: absolute;
left: 164px;
top: 226px;
visibility: visible;
}
I should also mention that the div elements are structured as such:
<div class="dicetree">
<img src="/dicetable.png" class="dicetable1">
<div class="dice1>
<img src="/greendice11.png" class="gdice11">
<img src="/greendice12.png" class="gdice12">
<img src="/greendice13.png" class="gdice13">
<img src="/greendice14.png" class="gdice14">
<img src="/greendice15.png" class="gdice15">
<img src="/greendice16.png" class="gdice16">
</div>
<div class="dice2>
similar to dice1
</div>
<div class="dice3>
similar to dice1
</div>
<div class="dice4>
similar to dice1
</div>
<div class="dice5>
similar to dice1
</div>
<div class="dice6>
similar to dice1
</div>
</div>
I just want to toggle the visibility of each image, either immediately in a passage, or with a button press. Either way is fine, though I’d prefer both. Any info or help is much appreciated. Thank you.