Simple astro plain javascript function

Question

I am trying to learn Astro. I have this simple component and I don't know how to wire in a javascript function. Here is the code:

const response = await fetch("http://localhost:5000/replacement_timeline", 
                            {headers:{accept: "text/html"}}
                        );
const svgPic = await response.text();
var one_hundred_ar = "xMidYMin slice";
var one_hundred_label = "100%";
export function toggle_100_perc() {
    alert("here")
}

<div id="svg-container">
    <svg viewBox="0 0 2000 42000" width="1200" height="500" preserveAspectRatio={one_hundred_ar}>
        <Fragment set:html={svgPic}>
        </Fragment>    
    </svg>
</div>
    <div>
        <input id="scale" type="button" value={one_hundred_label} onclick="toggle_100_perc()">
        <input id="scroll-up" type="button" value="^">
        <input id="scroll-down" type="button" value="v">
    </div>


<style>
    #svg-container {
        border: solid;
        margin: 10px;
        padding: 5px
    }
</style>

How do I activate the toggle_100_perc() function? I suspect my problem has nothing to do with Astro, rather javascript.

Answer 1

Put your script inside the public/ folder

Don't export the function, you can add the script onto the page. E.g:

code:

<script src="/script.js">

script.js:

function toggle_100_perc () {
    alert('here')
}

usage:

onclick="toggle_100_perc()"