How do I call the setColor function when the start button is pressed? If the button is pressed, the function will be called and the text will be colored. I don't want the text to be recited automatically.. I want it to be recited when the start button is pressed

var mysong = document.getElementById("mysong");
var icon   = document.getElementById("icon");

icon.onclick = function() {
  mysong.play();
}



const words = Array.from(document.querySelectorAll(".word", ".wordw"));
const speed = 700;
let counter = 0;

const setColor = () => {
  words[counter].style.color = "#29b4af";

  words.map((word, index) => {
    if (index !== counter) {
      word.style.color = "initial";
    }
  });

  setTimeout(() => {
    if (counter < words.length) {
      setColor();
    } else {
      word.style.color = "initial";
    }

    counter  ;
  }, speed);
};

setColor();

body {
  background-image    : url("../imgg/1.jpg");
  background-repeat   : no-repeat;
  background-position : 10% 10%;
  background-position : top;
  background-size     : 32.7%;
}

<div >
  <h1>
    <span >Hello   </span>
    <span > welcome </span>
    <span >back  </span>
  </h1>
</div>
<div >
  <a href="#"  id="icon" onclick="setColor()">start</a>
</div>

<audio id="mysong">
  <source src="imgg/bharf.mp3" type="audio/mp3">
</audio>

CodePudding user response：

One approach is as below, with comments in the posted code:

// I removed the '.wordw' selector, since no element in your posted code
// matches that selector; and I put all the const declarations next to each
// other:
const words = Array.from(document.querySelectorAll(".word")),
  speed = 700,
  // caching a reference to the start button:
  startButton = document.querySelector('#icon.start'),
  setColor = () => {
    words[counter].style.color = "#29b4af";

    words.map((word, index) => {
      if (index !== counter) {
        word.style.color = "initial";
      }
    });

    setTimeout(() => {
      if (counter < words.length) {
        setColor();
      } else {
        /* your original code had
        word.style.color = 'initial'
           this was a problem because, at this
           point 'word' was undefined; so
           here we use NodeList.prototype.forEach()
           to iterate over all the words and update
           their color to 'initial': */
        words.forEach(
          (el) => el.style.color = 'initial'
        );
      }

      counter  ;
    }, speed);
  };

let counter = 0;

// removed the function call that you didn't want (it's not here, but this comment
// is to make clear why it's not here).

// binding the setColor() function as the event-handler for the 'click'
// event on the start-button:
startButton.addEventListener('click', setColor);

body {
  background-image: url("../imgg/1.jpg");
  background-repeat: no-repeat;
  background-position: 10% 10%;
  background-position: top;
  background-size: 32.7%;
}

<div >
  <!-- I removed the random surplus white-space characters: -->
  <h1><span >Hello</span> <span >welcome</span> <span >back</span></h1>
</div>

<div >
  <!-- removed the onclick inline event-handler, because
       it's poor practice and a maintenance headache: -->
  <a href="#"  id="icon">start</a>
</div>

<audio id="mysong">
  <source src="imgg/bharf.mp3" type="audio/mp3">
</audio>

Note, I corrected the "satrt" to "start," because the typo (assuming it was a typo) irritated me; consider putting it back if you need it to be spelled that way.

References:

• EventTarget.addEventListener().

CodePudding user response：

make things in order...

1. change

<a href="#"  id="icon" onclick="setColor()">start</a>

to

<a href="#"  id="icon" >start</a>

JS code in order:

let counter = 0;

const
  mysong = document.getElementById("mysong") 
, icon   = document.getElementById("icon") 
, words  = [...document.querySelectorAll(".word", ".wordw")]
, speed  = 700
, setColor = () =>
  {
  words[counter].style.color = "#29b4af";

  words.map((word, index) => {
    if (index !== counter) {
      word.style.color = "initial";
    }
  });

  setTimeout(() => {
    if (counter < words.length)
      setColor();
    else
       words.forEach( el => el.style.color = 'initial' ); // words is an ARRAY !
    
    counter  ;
  }, speed);
};

icon.onclick = () => {  // if you use onclick property, this one MUST BE unique.
  setColor();
  mysong.play();
}