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