Function change text does not work if I add font awesome

Admin 1
Viewed 58

This is my function that takes the id from my button and changes the text:

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

It's working fine with this button (Add becomes Update)

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

But for some reason it does not change anymore if I try to add a font awesome icon:

<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>

What could be the cause?

font-awesome getelementbyid innerhtml function
2 Answers

I ran your code. It seems the problem is that you are checking if your modal_button_update button's innerHTML is equal to Add. The original button:

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

works because the innerHTML of your modal_button_update is exactly 'Add', but your modified 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> does not work because the innerHTML is <i class="fas fa-save" aria-hidden="true"></i>&gt;Add which is not equal (===) to 'Add'.

Here's three different ways I chose to solve this issue:

  1. Remove the <i class="fas fa-save" aria-hidden="true"> element and place the font-awesome icon inside the button class like: <button type="button" class="btn btn-primary save_button add_group fas fa-save" id="modal_button_text">Add</button> `
  2. Alter your Javascript to look something like: var modal_button_update = document.getElementById("modal_button_text"); if (modal_button_update.innerHTML.includes("Add")) { modal_button_update.innerHTML = "Update"; } Here the button checks to see if the innerHTML contains 'Add'.
  3. Keeping the font-awesome icon: In the two solutions above, your Javascript code will strip the button element of the font-awesome class when successfully changing the innerHTML to 'Update'. It is, imo, easier to use jQuery to alter the value of the button to solve this issue like:

---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");
}
user_70257490

If your intent is to keep the icon no matter the state of the text (i.e., Add or Update), I would personally enclose the word "Add" in a span as follows:

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>

Then it is just a matter of whether you use jQuery or not as to which of the following will work for you.

JavaScript:

Change value based on current text:

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

Toggle value when the button is clicked based on current text:

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

jQuery:

Change value based on current text:

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

Toggle value when the button is clicked based on current text:

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

By enclosing the word Add in a span, you are free to do whatever you need to the text without disrupting the rest of the button or save icon.

user_32243250
Related