title: innerHTML not working properly. JavaScript
body: <p>I am trying to print the result but for some reason <code>innerHTML</code> is not working properly. Can anyone take a look ?</p>
  
  <p><strong>Not working</strong></p>
  
  <pre><code>let show = document.querySelector('#show')
  
  fetch('/fetchDataAll')
          .then((resp) =&gt; resp.json()) // Transform the data into json
          .then(function (data) {
              show.innerHTML = ''
              let players = data.result; // Get the results
  
              let string = players.map(function (player) {
  
                  let colorToChange = "";
                  let plusMinusSign = "";
                  let colorWhite = "#FFFFFF";
  
  
                  if (player.scoreChange &gt;= 0) {
                      colorToChange = "#66FF13";
                      plusMinusSign = "+";
                  }
                  else {
                      colorToChange = "#D0021B";
                      plusMinusSign = "";
                  }
  
                  `&lt;p style='color:${colorWhite}'&gt;${player.playerName}&lt;/p&gt;
                  &lt;p style='color:${colorWhite}'&gt;${player.teamName}&lt;/p&gt;
                  &lt;h3 style='color:${colorToChange}'&gt;${plusMinusSign} ${player.scoreChange} %&lt;/h3&gt;`
              })
                  .join('')
  
              return show.innerHTML += string
  
          })
          .catch(function (error) {
              console.log(error);
          });
  </code></pre>
  
  <p><strong>Working with jQuery append()</strong></p>
  
  <pre><code>let show = document.querySelector('#show')
  
  fetch('/fetchDataAll')
      .then((resp) =&gt; resp.json()) // Transform the data into json
      .then(function (data) {
          show.innerHTML = ''
          let players = data.result; // Get the results
  
          return players.map(function (player) {
  
              let colorToChange = "";
              let plusMinusSign = "";
              let colorWhite = "#FFFFFF";
  
  
              if (player.scoreChange &gt;= 0) {
                  colorToChange = "#66FF13";
                  plusMinusSign = "+";
              }
              else {
                  colorToChange = "#D0021B";
                  plusMinusSign = "";
              }
  
              $("#show").append(`&lt;p style='color:${colorWhite}'&gt;${player.playerName}&lt;/p&gt;
              &lt;p style='color:${colorWhite}'&gt;${player.teamName}&lt;/p&gt;
              &lt;h3 style='color:${colorToChange}'&gt;${plusMinusSign} ${player.scoreChange} %&lt;/h3&gt;`)
          })
  
  
      })
      .catch(function (error) {
          console.log(error);
      });
  </code></pre>
  
  <p><strong>SOLUTION with Vanilla JavaScript</strong></p>
  
  <pre><code>let show = document.querySelector('#show')
  
  fetch('/fetchDataAll')
  .then((resp) =&gt; resp.json()) // Transform the data into json
  .then(function (data) {
      show.innerHTML = "";
      let players = data.result; // Get the results
  
      show.innerHTML  = players.map(player =&gt; {
  
          let colorToChange = "";
          let plusMinusSign = "";
          let colorWhite = "#FFFFFF";
  
  
          if (player.scoreChange &gt;= 0) {
              colorToChange = "#66FF13";
              plusMinusSign = "+";
          }
          else {
              colorToChange = "#D0021B";
              plusMinusSign = "";
          }
  
          return `&lt;p style='color:${colorWhite}'&gt;${player.playerName}&lt;/p&gt;
          &lt;p style='color:${colorWhite}'&gt;${player.teamName}&lt;/p&gt;
          &lt;h3 style='color:${colorToChange}'&gt;${plusMinusSign} ${player.scoreChange} %&lt;/h3&gt;`
      }).join('')
  
  })
  .catch(function (error) {
      console.log(error);
  });
  </code></pre>