How to call Javascript in Blazor package?

Question

This is a blazor project.The Javascipt code is for button in razor. The code is for button group which is when people click button in group 1 and group 2 it change color but in the group 1 will not be deselected.

I try to call my javascript function in C# but did'nt work.

export function switch_to_green(el) {

    //Check clicked button is on the same group
    if (el.parentElement.getAttribute("data-group") == 1) {
        //Get all buttons of group 1
        let g1_buttons = document.querySelectorAll('#group1 .btn');
        for (let i = 0; i < g1_buttons.length; i++) {
            //Remove green color from unselected buttons
            g1_buttons[i].classList.remove('green');
        }
    } else {
        //Get all buttons of group 2
        let g2_buttons = document.querySelectorAll('#group2 .btn');
        for (let i = 0; i < g2_buttons.length; i++) {
            //Remove green color from unselected buttons
            g2_buttons[i].classList.remove('green');
        }
    }
    //Add green color to the only selected one
    el.classList.add('green');

}

.show {
    display: block;
}

.btn-group {
    margin-top: 20px;
    overflow: hidden;
}

.btn {
    font-weight: bold;
    color: white;
    border: none;
    outline: none;
    padding: 12px 16px;
    /*blue*/
    background-color: #2c75ff;
    cursor: pointer;
}

    .btn:hover {
        font-weight: bold;
        color: white;
        /*green*/
        background-color: #85c995;
    }
    .btn.green {
        color: white;
        /*green*/
        background-color: #85c995;
    }

@page "/Test"
@inject IJSRuntime JSRuntime;
public

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<div class="row">
    <div class="column" style="width:30%">
        <div class="btn-group" id="group1" data-group="1">
            <button type="button" class="btn btn-primary" style="outline-color:red; " @onclick="LoadFile">Sunday</button>
            <button type="button" class="btn btn-primary" @onclick="LoadFile">Tuesday</button>
            <button type="button" class="btn btn-primary" @onclick="LoadFile">Friday</button>
        </div>
    </div>
    <div class="column" style="width:70%">
        <div class="btn-group" id="group2" data-group="2">
            <button type="button" class="btn btn-primary" @onclick="LoadFile">9 am</button>
            <button type="button" class="btn btn-primary" @onclick="LoadFile">2 pm</button>
            <button type="button" class="btn btn-primary" @onclick="LoadFile">5 pm</button>
            <button type="button" class="btn btn-primary" @onclick="LoadFile">8 pm</button>
        </div>
    </div>
</div>

@code{
    string name = string.Empty;
    IJSObjectReference module;

    async Task LoadFile()
    {
        module = await JSRuntime.InvokeAsync< IJSObjectReference>("import","./Script/btn.js");
        }
}

What I have tried:

Javascript Isolataion

Blazor JavaScript isolation and object references

Solved Result

Result

Answer 1

You can use @ref and pass ElementReference to LoadFile,and module = await JSRuntime.InvokeAsync< IJSObjectReference>("import","./Script/btn.js"); will only load js,you need to call the function switch_to_green.Here is a demo:

@inject IJSRuntime JSRuntime;
    <div class="row">
        <div class="column" style="width:30%">
            <div class="btn-group" id="group1" data-group="1">
                <button @ref=button1 type="button" class="btn btn-primary" style="outline-color:red; " @onclick="@(()=>LoadFile(@button1))">Sunday</button>
                <button @ref=button2 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button2))">Tuesday</button>
                <button @ref=button3 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button3))">Friday</button>
            </div>
        </div>
        <div class="column" style="width:70%">
            <div class="btn-group" id="group2" data-group="2">
                <button @ref=button4 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button4))">9 am</button>
                <button @ref=button5 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button5))">2 pm</button>
                <button @ref=button6 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button6))">5 pm</button>
                <button @ref=button7 type="button" class="btn btn-primary" @onclick="@(()=>LoadFile(@button7))">8 pm</button>
            </div>
        </div>
    </div>
@code{
    string name = string.Empty;
    IJSObjectReference module;
    private ElementReference button1;
    private ElementReference button2;
    private ElementReference button3;
    private ElementReference button4;
    private ElementReference button5;
    private ElementReference button6;
    private ElementReference button7;


    async Task LoadFile(ElementReference element)
    {
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Script/btn.js");
        await module.InvokeVoidAsync("switch_to_green", element);
    }
}

result: