使用 Razor 页面单击时更改颜色按钮

Question

这是点击时需要改变颜色的按钮。这是来自 Razor 页面。我已经尝试了 javascript 代码，但是当我输入时它给出了一个错误，我也尝试了 css 代码（焦点和活动），没有工作。我是这个代码的新手。请帮忙。我只是想要这样的东西

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary" style="outline-color:red" @onclick="() => UpdateTheChart(11)">@Language.T35</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(22)">@Language.T38</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
    </div>
  </div>
</div>
</div>

这是这里的完整代码。我是这个代码的新手。请告诉我如何放置一个没有错误的js代码（错误没有组件）

 @page "/results"
@inject Blazored.LocalStorage.ISyncLocalStorageService localStore
@inject IJSRuntime JSRuntime;
@inject Toolbelt.Blazor.I18nText.I18nText I18nText

<h1>@Language.T8</h1>

<div>
    <div class="row">
        <div class="column" id="chartColumn" style="width:80%;text-align:center">
            <canvas id="myChart"></canvas>
        </div>
        <div class="column" style="width:20%;text-align:center;font-size:1.5vw">
            <br />
            <br />
            <br />
            <br />
            <span>
                @ResultInText <br />
            </span>
            <h1 style="font-weight:bolder">@FilterSavings</h1>
            <br />
            <br />
            <span>
                @WasteTextPaper<br />
                @WasteTextPlastic
            </span>
            @if (SelectedChartCategory == 13)
            {
                <br />
                <br />
                <br />
                <br />
                <br />
            }
            <span style="font-size:0.4vw">@DisclaimerText</span>
        </div>
    </div>
    <hr />

    <div class="row">
        <div class="column" style="width:30%">
            <b>@Language.T33</b>
        </div>
        <div class="column" style="width:70%">
            <b>@Language.T34</b>
        </div>
    </div>

    <div class="row">
        <div class="column" style="width:30%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" style="outline-color:red" @onclick="() => UpdateTheChart(11)">@Language.T35</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>
            </div>
        </div>
        <div class="column" style="width:70%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(22)">@Language.T38</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
                <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
            </div>
        </div>
    </div>
</div>


@code {//handles initialization
    I18nText.Language Language = new I18nText.Language();
    List<float> retResultMHC = null;
    List<float> retResultCom = null;
    string retResultMHCProduct = "";
    string retResultCOMProduct = "";
    double retResultCostSavings = 0;
    double retResultTimeSavings = 0;
    double retResultWasteReduction = 0;
    double retResultWastePaper = 0;
    double retResultWastePlastic = 0;
    string retResultWasteFlag = "";
    string retResultCostFlag = "";
    string retResultTimeFlag = "";
    string FilterSavings = "";
    string WasteTextPaper = "";
    string WasteTextPlastic = "";
    string retCurrency = "";
    string DisclaimerText = "";
    string ResultInText = "Cost savings for all patients during a year";
    int SelectedChartCategory = 11;
    int SelectedChartPeriod = 24;
    int CalChartPeriod = 1;
    string SelectedResultFlag = "savings";
    string PeriodUOM = "year";

    protected override void OnInitialized()
    {
        InitializeLocalStorage();
        if (retResultMHC != null && retResultCom != null)
        {
            UpdateTheChart(11);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        Language = await I18nText.GetTextTableAsync<I18nText.Language>(this);
        ResultInText = Language.T118 + Language.T127;
    }

    private void InitializeLocalStorage()
    {
        retResultMHCProduct = localStore.GetItemAsString("Result-MHC-Product");
        retResultCOMProduct = localStore.GetItemAsString("Result-COM-Product");
        retResultMHC = localStore.GetItem<List<float>>("Result-MHC");
        retResultCom = localStore.GetItem<List<float>>("Result-COM");
        retResultCostSavings = localStore.GetItem<double>("Result-Cost-Savings");
        retResultTimeSavings = localStore.GetItem<double>("Result-Time-Savings");
        retResultWasteReduction = localStore.GetItem<double>("Result-Waste-Reduction");
        retResultCostFlag = localStore.GetItemAsString("Result-Cost-Flag");
        retResultTimeFlag = localStore.GetItemAsString("Result-Time-Flag");
        retResultWasteFlag = localStore.GetItemAsString("Result-Waste-Flag");
        retResultWastePaper = localStore.GetItem<double>("Result-Waste-Paper");
        retResultWastePlastic = localStore.GetItem<double>("Result-Waste-Plastic");
        retCurrency = localStore.GetItemAsString("CurrencyKey");
    }
}

@code{//handles chart
    private IJSObjectReference _jsModule;

    //this will be the live code
    private async Task UpdateTheChart(int clickedButton)
    {
        //assign the selected parameters
        if (clickedButton == 11 || clickedButton == 12 || clickedButton == 13)
            SelectedChartCategory = clickedButton;
        else
            SelectedChartPeriod = clickedButton;

        if (SelectedChartPeriod == 21)
        {
            PeriodUOM = Language.T124;
            CalChartPeriod = 365;
        }
        else if (SelectedChartPeriod == 22)
        {
            PeriodUOM = Language.T125;
            CalChartPeriod = 52;
        }
        else if (SelectedChartPeriod == 23)
        {
            PeriodUOM = Language.T126;
            CalChartPeriod = 12;
        }
        else if (SelectedChartPeriod == 24)
        {
            PeriodUOM = Language.T127;
            CalChartPeriod = 1;
        }
        else
        {
            PeriodUOM = Language.T127;
            CalChartPeriod = 1;
        }

        ResultInText = "";
        //things to do before showing the selected chart
        if (SelectedChartCategory == 11)
        {
            if (retResultCostFlag == "savings")
                ResultInText = Language.T118 + PeriodUOM;
            else
                ResultInText = Language.T119 + PeriodUOM;
                        
            WasteTextPaper = "";
            WasteTextPlastic = "";

            FilterSavings = string.Format(retCurrency + "{0:n0}", retResultCostSavings / CalChartPeriod);
            DisclaimerText = "";
        }
        else if (SelectedChartCategory == 12)
        {
            if (retResultCostFlag == "savings")
                ResultInText = Language.T120 + PeriodUOM;
            else
                ResultInText = Language.T121 + PeriodUOM;

            WasteTextPaper = "";
            WasteTextPlastic = "";

            FilterSavings = string.Format("{0:n0}", retResultTimeSavings / CalChartPeriod) + " " + Language.T134;
            DisclaimerText = "";
        }
        else if (SelectedChartCategory == 13)
        {
            if (retResultCostFlag == "reduction")
                ResultInText = Language.T122 + PeriodUOM;
            else
                ResultInText = Language.T123 + PeriodUOM;

            WasteTextPaper = Language.T128 + string.Format("{0:n2}", retResultWastePaper / CalChartPeriod) + " " + Language.T135;
            WasteTextPlastic = Language.T129 + string.Format("{0:n2}", retResultWastePlastic / CalChartPeriod) + " " + Language.T135;

            FilterSavings = string.Format("{0:n2}", retResultWasteReduction / CalChartPeriod) + " " + Language.T135;
            DisclaimerText = Language.T136;
        }

        //calling js to make the chart
        _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/MakeChart.js");
        if (SelectedChartCategory == 11)
        {
            await _jsModule.InvokeVoidAsync("showChartCost", CalChartPeriod, Language.T131, Language.T132, Language.T133);
        }
        else if (SelectedChartCategory == 12)
        {
            await _jsModule.InvokeVoidAsync("showChartTime", CalChartPeriod, Language.T130);
        }
        else
        {
            await _jsModule.InvokeVoidAsync("ShowChartPic");
        }
    }
}

Answer 1

我使用 css(.btn:focus)，它可以工作。这是一个演示：

<div>
    <div class="row">
        <div class="column" style="width:30%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Language.T35</button>
                <button type="button" class="btn btn-primary">Language.T36</button>
                <button type="button" class="btn btn-primary">Language.T37</button>
            </div>
        </div>
        <div class="column" style="width:70%">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">Language.T138</button>
                <button type="button" class="btn btn-primary">Language.T38</button>
                <button type="button" class="btn btn-primary">Language.T39</button>
                <button type="button" class="btn btn-primary">Language.T40</button>
            </div>
        </div>
    </div>
</div>
<style>
    .btn:focus {
        background-color: #ff6e40;
    }
</style>

结果：

Answer 2

好的。所以你可以在javascript中做的是写`document.getElementById("id of button").backgroundColor="whatever color you need to set in button"'

Answer 3

<button onclick="updateColor(this)">click me</button>

javascript内部

function updateColor(btn){
    btn.style.backgroundColor = 'red';
    btn.style.color = 'white';
}

我会解释这里发生了什么。

在按钮内部，onclick 属性接受一个函数（或 javascript 指令），您可以在参数中将单击的按钮作为 this 传递。

然后你可以在javascript函数中修改点击的元素。

编辑：

要使用 JavaScript，请按如下方式使用脚本标记...

<script>
    // your JavaScript code
</script>

只需将上面的脚本标签放在正文的末尾即可。

把所有的 JavaScript 代码都写在 html script 标签里面是不好的。

因此，您可以将src 添加到脚本标签并链接到单独的javascript文件，例如...

<script src="./yourpath/filename.js"></script>

Answer 4

您确定要使用 Javascript 吗？您可以使用变量来更新 Blazor 中的属性：

<button style="background-color:@bgcolor" @onclick=SetColor>Click</button>

@code
{
   string bgcolor {get; set;} = "00f"; // (starting value)

   void SetColor(){
       bgcolor = "#fd7"; (will update instantly)
       StateHasChanged();  // may not be required, but I'm at work right now, so can't check
   }
}

更好的办法是使用变量来设置对象的 CLASS：

<button class="@buttonclass" @onclick=SetColor>Click</button>
    
    @code
    {
       string buttonclass{get; set;} = "btn btn.primary"; // (starting value)
    
       void SetColor(){
           buttonclass= "btn btn.secondary";
           StateHasChanged();  // may not be required, but I'm at work right now, so can't check
       }
    }

此外，您似乎有很多重复的条目。在 Blazor 中，考虑拥有一个包含所有各种语言的列表，并在您的标记中执行此操作：

<div>
    @foreach (item in LanguageItems){
        <button class="btn btn-primary" >@item.Language</button>
    }
</div>
@code
{
     List<MyLanguageClass> LanguageItems {get; set;}
     protected override async Task OnInitializedAsync(){
          // Loadup your list of items from a database or whatever
     }
}