How do I get the value from the button? blazor

Question

I ran into a bit of a silly problem. I have this piece of code with button values and method when pressed, but how do I get the button value itself to change the calculator screen?

<div class="text-center">
     <div class="calc">
        <div class="calc_screen">
            <p>@equation</p>
        </div>
        <div class="calc_buttons">
            <button class="calc_button ac bg-grey" value="AC" @onclick = "GetValue">AC</button>
            <button class="calc_button plus-minus bg-grey" value="+/-" @onclick = "GetValue">>+/-</button>
            <button class="calc_button percent bg-grey" value="%" @onclick = "GetValue">%</button>
            <button class="calc_button division bg-orange" value="/" @onclick = "GetValue">/</button>
            <button class="calc_button seven" value="7" @onclick = "GetValue">7</button>
            <button class="calc_button eight" value="8" @onclick = "GetValue">8</button>
            <button class="calc_button nine" value="9" @onclick = "GetValue">9</button>
            <button class="calc_button multiply bg-orange" value="X" @onclick = "GetValue">X</button>
            <button class="calc_button four" value="4" @onclick = "GetValue">4</button>
            <button class="calc_button five" value="5" @onclick = "GetValue">5</button>
            <button class="calc_button six" value="6" @onclick = "GetValue">6</button>
            <button class="calc_button minus bg-orange" value="-" @onclick = "GetValue">-</button>
            <button class="calc_button one" value="1" @onclick = "GetValue">1</button>
            <button class="calc_button two" value="2" @onclick = "GetValue">2</button>
            <button class="calc_button three" value="3" @onclick = "GetValue">3</button>
            <button class="calc_button plus bg-orange" value="+" @onclick = "GetValue">+</button>
            <button class="calc_button zero" value="0" @onclick = "GetValue">0</button>
            <button class="calc_button dot" value="," @onclick = "GetValue">,</button>
            <button class="calc_button equal bg-orange" value="=" @onclick = "GetValue">=</button>
        </div>
    </div>
</div>
@code{
    private string equation = "0";
    private void GetValue(){
        equation =  "some value of the button";
    }
}

Answer 1

For this type of thing, you need to pass the value into the event handler, like this

<button @onclick=@(_=>GetValue("AC"))>AC</button>

And, of course your handler needs to accept the value

private void GetValue(string value)
{
    equation =  value;
}

Answer 2

Try something like this:

    private void GetValue(object sender, EventArgs e){
        equation =  sender.value;
    }

Answer 3

Try following code:

<div class="text-center">
    <div class="calc">
        <div class="calc_screen">
            <p>@equation</p>
        </div>
        <div class="calc_buttons">
            <button class="calc_button ac bg-grey" value="AC" @onclick="@(_=>GetValue("AC"))">AC</button>
            <button class="calc_button plus-minus bg-grey" value="+/-" @onclick="@(_=>GetValue("+/-"))">+/-</button>
            <button class="calc_button percent bg-grey" value="%" @onclick="@(_=>GetValue("%"))">%</button>
            <button class="calc_button division bg-orange" value="/" @onclick="@(_=>GetValue("/"))">/</button>
            <button class="calc_button seven" value="7" @onclick="@(_=>GetValue("7"))">7</button>
            <button class="calc_button eight" value="8" @onclick="@(_=>GetValue("8"))">8</button>
            <button class="calc_button nine" value="9" @onclick="@(_=>GetValue("9"))">9</button>
            <button class="calc_button multiply bg-orange" value="X" @onclick="@(_=>GetValue("X"))">X</button>
            <button class="calc_button four" value="4" @onclick="@(_=>GetValue("4"))">4</button>
            <button class="calc_button five" value="5" @onclick="@(_=>GetValue("5"))">5</button>
            <button class="calc_button six" value="6" @onclick="@(_=>GetValue("6"))">6</button>
            <button class="calc_button minus bg-orange" value="-" @onclick="@(_=>GetValue("-"))">-</button>
            <button class="calc_button one" value="1" @onclick="@(_=>GetValue("1"))">1</button>
            <button class="calc_button two" value="2" @onclick="@(_=>GetValue("2"))">2</button>
            <button class="calc_button three" value="3" @onclick="@(_=>GetValue("3"))">3</button>
            <button class="calc_button plus bg-orange" value="+" @onclick="@(_=>GetValue("+"))">+</button>
            <button class="calc_button zero" value="0" @onclick="@(_=>GetValue("0"))">0</button>
            <button class="calc_button dot" value="," @onclick="@(_=>GetValue(","))">,</button>
            <button class="calc_button equal bg-orange" value="=" @onclick="@(_=>GetValue("="))">=</button>
        </div>
    </div>
</div>
@code{
    private string equation = "0";
    private void GetValue(String StrValue)
    {
        equation = StrValue;
        StateHasChanged();
    }
}

And don't forget to use StateHasChanged(); after calling methodes. Result:

Answer 4

Did you tried?

@code{
    private string equation = "0";
    private void GetValue(){
        equation =  document.getElementByClassName("calc_button").innerHTML;
    }
}