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>

FAKE lets you write F# code to build .NET projects. I don't understand what it has to do with JavaScript. Do you mean SAFE, or Fable? What code do you already have at the moment? How did you create the project? — TheQuickBrownFox, Nov 10 '20 at 09:43
Sorry, yes it currently uses both SAFE and Fable. I did not create the project, I am doing front-end modifications. F# is not a specialty of mine so I am very lost. I want to achieve the same results, but I don't know if it is possible to do it using Javascript, and want to know if there is an F# alternative to get the results I need — David McIntyre, Nov 10 '20 at 20:21
If this is a SAFE project then you're likely using Elmish, which has a very particular method for managing state and separating it from DOM (HTML) elements. You'll need to take a few steps back and learn about Elmish rather than trying to adapt your previous knowledge directly. You should read some of this book: https://zaid-ajaj.github.io/the-elmish-book/#/chapters/elm/ — TheQuickBrownFox, Nov 11 '20 at 10:00

score 1 · Answer 1 · answered Nov 09 '20 at 21:16

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.

Thank you for the suggestion, but the javascript above was just a quick example to show what I am looking to accomplish in F# :) — David McIntyre, Nov 09 '20 at 21:32

Javascript onclick alternative in F# - SAFE

1 Answers1