Javascript onclick alternative in F# - SAFE
Question
I have two divs of matching sizes on a page, and want to hide one and display the other, swapping between them on a button click. Usually i would use a javascript click event to toggle display, but i am unsure of how to use default Javascript with SAFE, and was wondering if there was an F# alternative.
I want results similar to this (but in F#):
var divs = document.getElementsByClassName("square"); var inactive = document.getElementsByClassName("square inactive"); function swapDivsOnClick(div) { active = document.getElementById(div); inactive[0].classList.remove("inactive"); active.classList.add("inactive"); }
.square { width: 150px; height: 150px; } #red { background-color: red; } #green { background-color: green; } .inactive { display: none; } h1 { color: white; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/styles.css"> <title>Page Title</title> </head> <body> <div id="red" class="square"> <button class="toggle" onclick="swapDivsOnClick('red')">Click Me</button> <h1>Div 1</h1> </div> <div id="green" class="square inactive"> <button class="toggle" onclick="swapDivsOnClick('green')">Click Me</button> <h1>Div 2</h1> </div> </body> <script src="js/scripts.js"></script> </html>
1 answers
solution1
1 2020-11-09 21:16:12
You don't need onclick="swapDivsOnClick('red')"
Try to use that
var divs = document.getElementsByClassName("square");
if(divs.length) {
for (let el of divs) {
el.addEventListener("click", function(e) {
// here you can remove "inactive" class from all elements
for (let elem of divs) {
elem.classList.remove("inactive");
}
// and the add "inactive" class to current clicked element
this.classList.add("inactive");
})
}
}
It will remove class "inactive" from all divs, and then add the class to current clicked div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.