如果我添加很棒的字体，功能更改文本将不起作用

Question

这是我的函数，它从我的按钮中获取 id 并更改文本：

var modal_button_update = document.getElementById("modal_button_text");
if (modal_button_update.innerHTML === "Add") { modal_button_update.innerHTML = "Update"; }

这个按钮工作正常（添加变成更新）

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

但出于某种原因，如果我尝试添加一个很棒的字体图标，它就不再改变了：

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

可能是什么原因？

Answer 1

我运行你的代码。问题似乎是您正在检查 modal_button_update 按钮的内部 HTML 是否等于添加。原始按钮：

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

有效，因为您的 modal_button_update 的内部 HTML 正好是 'Add'，但您修改后的 modal_button_update: <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button> 无效，因为内部 HTML 是 <i class="fas fa-save" aria-hidden="true"></i>>Add 不等于 (===) 'Add'.

以下是我选择的三种不同方法来解决这个问题：

删除 <i class="fas fa-save" aria-hidden="true"> 元素并将超棒的字体图标放在按钮 class 内，例如：<button type="button" class="btn btn-primary save_button add_group fas fa-save" id="modal_button_text">Add</button> `
改变你的 Javascript 看起来像：var modal_button_update = document.getElementById("modal_button_text"); if (modal_button_update.innerHTML.includes("Add")) { modal_button_update.innerHTML = "Update"; } 这里按钮检查是否 innerHTML 包含 'Add'.
保持超棒的字体图标：在上面的两个解决方案中，当成功将内部 HTML 更改为 'Update' 时，您的 Javascript 代码将去除字体超棒 class 的按钮元素。它是，imo，更容易使用 jQuery 来改变按钮的值来解决这个问题，如：

---HTML---

                    <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

---Javascript--

if ($('#modal_button_text').html().includes("Add")) {
    $('#modal_button_text').html("Update");
}

Answer 2

如果您的意图是无论文本的状态如何（即添加或更新）都保留图标，我会亲自将“添加”一词括在一个跨度中，如下所示：

HTML:

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

那么就看你用不用jQuery了，以下哪一个适合你。

JavaScript:

根据当前文本更改值：

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

根据当前文本单击按钮时的切换值：

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

jQuery:

根据当前文本更改值：

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

根据当前文本单击按钮时的切换值：

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

通过将“添加”一词括在一个跨度中，您可以自由地对文本执行任何需要的操作，而不会影响按钮的其余部分或保存图标。

如果我添加很棒的字体，功能更改文本将不起作用

Function change text does not work if I add font awesome

function

font-awesome

innerhtml

getelementbyid