How do I bold the first Item in my array only, while leaving the rest normal?

Question

so I want to bold the first Item in my array of this typewriter effect. you can see below the type of effect I'm going for.

Judaism is <strong> A Religion </strong>
Judaism is  a culture
Judaism is  a lifestyle    

and the rest of the array continues as normal text,

I first tried creating a bold function that targets the first child but it seems like I'm doing it wrong please help!

You can see what I have so far below:

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}

html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }

<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

Answer 1

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}

html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }

<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}

html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }

<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText"><p><strong>Judaism </strong>is</p></span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

Answer 2

How to Bold Text in HTML with the Strong Element To define text with strong importance, place the text inside <strong> tags. Let’s look at an example.

Here’s the HTML:

<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>