When value of textbox is changed Dropdown is not calculating

Question

I created a code so that Area of Square/Equilateral Triangle can be calculated when selecting dropdown.

When I change the dropdown value it works but when textbox is changed please suggest on how to call OnValueChanged

@page "/Mensuration"
<PageTitle>Mensuration</PageTitle>
<h1>Mensuration</h1>
 
<p>Shape: @val</p>
<p>Please select a Shape from the Lists:</p>
 
<select class="select-element"  @onchange="OnValueChanged">
    @foreach (var topping in toppings)
    {
        <option value="@topping.Name">@topping.Name</option> 
    }
</select>
<br />
<div class="row">
    <div class="col-md-3">
        <p>Number1</p>
    </div>
    <div class="col-md-4">
        <input placeholder="NUM 1" @bind="@num1"   />
    </div>
    <p>Area</p>
    @area
    <br />
    <p>Perimeter</p>
    @perimeter
    <br />
</div>
 
<br />
 
@code
{
    public record Topping(int Id, string Name); private decimal num1;private decimal area; private decimal temparea;
    private string? selectedTopping; private string val;private decimal perimeter;
    public List<Topping> toppings = new List<Topping>()
    {   
        new Topping(0, "Select a Value"),
        new Topping(1, "Square"),
        new Topping(2, "Equilateral Triangle") 
    };
 
    public void OnValueChanged(ChangeEventArgs e)
    {
        area = 0.0m;
        perimeter = 0.0m;
        val  = e.Value.ToString();
        if (val == "Square")
        {
            area = Math.Round(Decimal.Multiply(num1 , num1),2);
            perimeter = Math.Round(Decimal.Multiply(num1, 4.00m));
        }
        if (val == "Equilateral Triangle")
        {
            temparea = Decimal.Multiply( Decimal.Multiply(1.73m, num1) , num1);
            area = Math.Round(Decimal.Divide(temparea, 4.00m),2);
            perimeter = Math.Round(Decimal.Multiply(num1, 3.00m));
        }
        
    }
   
}

Answer 1

I achieved the same with navigation and multiple pages

@inject NavigationManager Navigation
@page "/Mensuration"
<PageTitle>Mensuration</PageTitle>
<h1>Mensuration</h1>
<p>Shape: @val</p>
<p>Please select a Shape from the Lists:</p>
<select class="select-element"  @onchange="OnValueChanged">
    @foreach (var topping in toppings)
    {
            <option value="@topping.Name">@topping.Name</option> 
    }
</select>
<br />
 
<br />
@code
{
    public record Topping(int Id, string Name); private decimal num1; private decimal area; private decimal temparea;
    private string? selectedTopping; private string val; private decimal perimeter;
    public List<Topping> toppings = new List<Topping>()
    {
        new Topping(0, "Select a Value"),
        new Topping(1, "Square"),
               new Topping(2, "Circle")
    };
    public void OnValueChanged(ChangeEventArgs e)
    {
        area = 0.0m;
        perimeter = 0.0m;
        val = e.Value.ToString();
        if (val == "Square")
        {
         Navigation.NavigateTo("/Square", true);
        }
       
        if (val == "Circle")
        {
            Navigation.NavigateTo("/Circle", true);
        }
    }
}
@page "/Square"
<h3>Square</h3>
<EditForm Model="@submitActivity" OnSubmit="@Submit">
    
    <div class="row">
        <div class="col-md-3">
            <p>Enter one side of a Square</p>
        </div>
        <div class="col-md-4">
            <input placeholder="One Side of a Square" @bind="@num1" disabled=@isdisabled />
        </div>
    </div>
    <br />
    
 
    <div>
        <button type="submit">Calc</button>
    </div>
    <div>
        @errmsg
    </div>
    <div class="col-md-3">
        <p>Area</p>
    </div>
    <br />
    <div>
        @area
    </div>
    <br />
    <p>Perimeter</p>
    <br />
    <div>
    @perimeter
    </div>
      <br>
</EditForm>
@code {
    private decimal num1; private decimal area; private decimal temparea; private decimal perimeter; public string skip; private bool isdisabled = false;
    public string @errmsg = "";
    private ACTIVITY submitActivity { get; set; } = new();
    public class ACTIVITY
    {
        public string Dummy { get; set; }
    }
    
    private void Submit()
    {
        if (num1 >  0)
        {
            isdisabled = true;
        }
        errmsg = "";
        skip = "N";
        if ((num1 <= 0)  )
        { skip = "Y"; }
        if ((num1 > 200)  )
        { skip = "Y"; }
        if (skip == "N")
        {
            area = Math.Round(Decimal.Multiply(num1, num1), 2);
            perimeter = Math.Round(Decimal.Multiply(num1, 4.00m));
        }
        else
        { errmsg = "Enter a number between 1 and 200"; }
    }
    }

Answer 2

The blazor onchange for input is tied to the blur and used for binding. You can use the browser input event, which will fire as each char.