在第一次为 let 变量赋值后，它的值没有改变#JavaScript答案

【问题标题】：After getting value assign first time for let variable its value is not getting change #JavaScript在第一次为 let 变量赋值后，它的值没有改变#JavaScript
【发布时间】：2021-10-30 15:50:33
【问题描述】：

我已经创建了点击事件，点击后弹出窗口打开。在那个弹出窗口中，他们是一个声明，其中我动态更改了 enable 和 disable 关键字，因此，当我第一次运行服务器时，值是 get assign 让变量，但在单击同一个按钮后，变量的值不会在弹出框中发生变化。

HTML

<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title">%MODALNAME%</h5>*@
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to %STATUS% the rule with Options ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

JavaScript

const changeStatusText = function (value) {
            let statusText = $('#action-confirm-box').find('div.modal-body').html();
            if (value) {
                console.log("Inside IF");
                statusText = statusText.replace('%STATUS%', 'disable');
            }
            else {
                console.log("Inside else");
                statusText = statusText.replace('%STATUS%', 'enable');
            }
            $('#action-confirm-box').find('div.modal-body').html(statusText);
        };

因此，当代码运行并单击按钮时，弹出窗口第一次打开并分配 %STATUS% 值，但第二次单击 %STATUS% If 和 else 语句的值保持不变。我没弄明白这里有什么问题

const operateEvents = {
            'click .btn-icon': function (e, value, row, index) {
                console.log("operateEvents  ", row);
                changeStatusText(row.enabled);
                    $('#action-confirm-box').modal('show');
                    
                $('#continue-confirm-box').click(() => changeStatus(row, index));
                
            }
        };

【问题讨论】：

给状态文本<p> 元素一个ID 并只编辑innerText 而不是HTML 不是更容易吗？这似乎是一种奇怪的做事方式。
我们似乎也只解决了一半的问题。请显示changeStatusText 的调用位置，最好是minimal reproducible example，不要让我们猜测缺少什么。
一旦你第一次替换了'%STATUS%，它就不能再替换了。
@JonP 我想在用户单击按钮时更改 %STATUS% 并且还希望它根据 if 和 else 语句中分配的值进行更改

标签： javascript html razor-pages asp.net-core-5.0

【解决方案1】：

在html中添加一个元素来更新内容

<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title">%MODALNAME%</h5>*@
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to <span class="status_text">%STATUS%</span> the rule with Options ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

然后通过 javascript 更新该元素的内容

const changeStatusText = function (value) {
            //Use the ternary operator to toggle the text
            $('#action-confirm-box .status_text').html(value ? "disable" : "enable");
}

【讨论】：