My Problem:

Hey Everyone,

I'm currently trying to write some simple code that takes specific strings and makes them bold using only JavaScript. The code works fine, but when testing it on mobile I noticed that it doesn't display the newly boldened string correctly.

Instead, it doesn't display anything.

Can anyone help me out with this?

What I've Tried:

I thought that maybe since I was replacing the text using ".innerHTML" rather than ".innerText" it was causing some sort of issue, however, I need to use ".innerHTML" since the string that JavaScript is returning is in HTML formatting (ex. <b>{Insert string here}</b>).

I tried setting the inner text of the elements equal to their inner HTML, but that resulted in each string being displayed as "<b>{Insert string here}</b>" rather than just the bold text alone.

My Code:

var text = document.getElementsByClassName('text-bold')
var boldText = []

for (i = 0; i < text.length; i++) { // For all of the elements with the class "text":
  var str = text[i].innerText // Get the inner text
  var bold = str.bold() // Make the inner text bold
  boldText.push(bold) // Return the string to an array
}

for (i = 0; i < text.length; i++) { // For all of the elements with the class "text":
  text[i].innerHTML = boldText[i] // Replace the inner HTML with the corresponding bold text from the array
}

<div>
  <p class="text-bold">Hello!</p>
  <p class="text">Hi!</p>
  <p class="text-bold">Hey!</p>
</div>

UPDATE:

I initially thought this was an issue with mobile, but it seems as if it's only an issue with Safari.