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

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 >
        <article>
          <div  >
  <span >Judaism is </span>
  <span id="write"></span>
  <span >|</span>
</div>
  </article>
       </section>

CodePudding user response：

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

Here’s the HTML:

This is some normal paragraph text, and this is some important text.

CodePudding user response：

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 >
        <article>
          <div  >
  <span >Judaism is </span>
  <span id="write"></span>
  <span >|</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 >
        <article>
          <div  >
  <span ><p><strong>Judaism </strong>is</p></span>
  <span id="write"></span>
  <span >|</span>
</div>
  </article>
       </section>