mardi 14 avril 2020

if condition in innerhtml

I have the following code

     function showDetails(confirmed, recovered, deaths) {
  if (recovered == undefined && deaths == undefined) {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
  <p> ${confirmed}</p>
    </div>`;
  } else if (recovered == undefined) {
    output.innerHTML = `<div class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
   <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  } else if (deaths == undefined) {
    output.innerHTML = `<div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
  <p>${recovered}</p>
    </div>`;
  } else {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>Casi confermati</p>
<p>${confirmed}</p>
    </div >
    <div class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
<p>${recovered}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
  <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  }
}

I would like to try to clean this code by inserting conditions into the innerHTML itself, but I can't understand how to do it and above all if it is possible to do such a thing or there are perhaps better ways to do it. What I would like to do is for example this :

        output.innerHTML = `
            <div  class="confirmed">
             <i class="fas fa-head-side-mask"></i> 
             <p>Casi confermati</p>
        <p>${confirmed}</p>
            </div >
//CONDITION
    if (${recovered} =!undefined ) {
            <div class="recovered">
          <i class="fas fa-heartbeat"></i>
          <p>Ricoverati</p>
        <p>${recovered}</p>
            </div>
    }
//CONDITION
if (${deaths} =!undefined ) {
            <div  class="deaths">
          <i class="fas fa-cross"></i>
          <p>Deceduti</p>
          <p>${deaths}</p>
            </div>`;
          }
}

can something like this be done? Sorry if it's a trivial question, but I'm trying to learn

Aucun commentaire:

Enregistrer un commentaire