调用 JS function 的 .NET 方法

Question

I have a function as below in index.js, which is invoked from navbar.razor

                    // gets the ID of button clicked - always gets the correct id
                    var BtnID = null 
                    var buttonElements = document.querySelectorAll('#items button');
                    for (var i = 0; i < buttonElements.length; i++) {
                        buttonElements[i].addEventListener('click', function () {                      
                            BtnID = this.getAttribute('id');
                        });
                    };
                    

                   // invoked from navbar.razor
                   // here is the problem, it works initially but does not work or set new ID when I switch from (page2-> page1-> page2). Remembers the old ID that was clicked before switching page.
                   window.getValues = function (val1, val2) {
                       yAxis[BtnID].setExtremes(val1, val2);                         
                 }

window.getValues works well initially. But once I switch pages, like page2 to page1 and come back again to page2(which is where this functionality is applied), it remembers only the old ID but not the new button ID that was clicked or does not take the new ID passed(BtnID) as shown above in index.js. May I now what would be the problem. Thank you.

Navbar.razor:

    <div id="items">
      <button id="0" @onclick=OpenDialog1>one</button>
      <button id="1" @onclick=OpenDialog2>two</button>
    </div>
                                  
    @code{
    private MyData model1 = new MyData { val1= 0, val2= 0 };
    private MyData model2 = new MyData { val1= 0, val2= 0 };
  
    private IModalDialog? modalDialog;

    private async Task OpenDialog1()
    {
        var request = new ModalRequest { InData = this.model1 };
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model1.val1, this.model1.val2);
    }

    private async Task OpenDialog2()
    {
        var request = new ModalRequest { InData = this.model2};
        if (this.modalDialog is not null)
            await modalDialog.ShowAsync<MyForm>(request);      
        await JSRuntime.InvokeVoidAsync("getValues", this.model2.val1, this.model2.val2);
    }

}

Answer 1

Your getValues function is becoming a closure. A closure is a function that references variables in the outer scope from its inner scope. The closure preserves the outer scope inside its inner scope.

You should place the code that gets the button ID inside the function:

window.getValues = function (val1, val2) {
    var BtnID = null; 
    var buttonElements = document.querySelectorAll('#items button');
    for (var i = 0; i < buttonElements.length; i++) {

        buttonElements[i].addEventListener('click', function () {                      
            BtnID = this.getAttribute('id');
        });
    };
  
    yAxis[BtnID].setExtremes(val1, val2);                         
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures