Donc, je veux qu'un bouton de réinitialisation apparaisse sur ma page lorsque le score du joueur atteint 5. Mais je n'arrive pas à le faire apparaître.

if (Score == 5) {
    btnQuestion.disabled = true;
    txtQuestionFeedback.innerText = "Correct! \n Congratulations, you've got 5 stars!";
    imgScore5.src = "Images/StarOn.gif";
    document.getElementById(btnReset).innerHTML = btnReset;
}
1
Chris 8 nov. 2019 à 16:27

3 réponses

Essayez ce qui suit:

1) Insérez votre élément de bouton dans un DIV comme celui-ci pour une lecture plus facile

<div id="resetButtonDiv">
<button id="resetButton"></button> <!-- here goes your button config -->
</div>

2) Changez le style comme ceci en utilisant JS

<script>

function showResetButton() {
 document.getElementById("resetButton").style.display = "none";   
 if (Score == 5) {
   // Replace "Score" with your variable or element
   document.getElementById("resetButton").style.display = "show";
 }
}
showResetButton()
</script>
1
Jose Barranco 8 nov. 2019 à 13:33

C'était ma façon de le faire:

ScoreBoard = function(sId, sIntoNode = '', fnOnChange = null) {
  this.m_sId = sId != '' ? sId : 'scoreboard';
  this.m_iScore = 0;
  this.m_fnOnChange = fnOnChange;
  
  if(sIntoNode != '') {
    let TargetNode = document.getElementById(sIntoNode);
    if(TargetNode) {
      TargetNode.innerHTML = TargetNode.innerHTML + '<div class="scoreboard-score" id="' + this.m_sId + '">0</div>';
    }
  }
}

ScoreBoard.prototype.SetScore = function(iNewScore) {
  this.m_iScore = iNewScore;
   
  let scoreBoard = document.getElementById(this.m_sId);
  if(scoreBoard) {
    scoreBoard.innerHTML = this.m_iScore;
  }
   
   
  if(this.m_fnOnChange && typeof this.m_fnOnChange == 'function') {
    this.m_fnOnChange(this);
  }
}

ScoreBoard.prototype.AddScore = function(iAmount) {
  this.SetScore(this.m_iScore + iAmount);
}

ScoreBoard.prototype.Reset = function() {
  this.SetScore(0);
}

ScoreBoard.prototype.GetScore = function() {
  return this.m_iScore;
}

function OnScoreChange(target) {
  let resetBtn = document.getElementById('myScore-reset');
  if(resetBtn) {
    if(target.GetScore() >= 5) {
      resetBtn.style.display = "block";
    } else {
      resetBtn.style.display = "none";
    }
  }
}

var myScore = new ScoreBoard('myScore', 'score', OnScoreChange);

var i = 0;
function test() {
  myScore.AddScore(1);
  i++;
  if(i < 20) setTimeout(test, 1000);
}

test();
div#score {
  padding: 12px;
  background-color: darkgrey;
  font-family: Arial;
  border-radius: 12px;
  box-shadow: 0 0 12px 3px black;
}

div.score-head {
  background-color: black;
  color: white;
  padding: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

div.scoreboard-score {
  background-color: #EAEAEA;
  padding: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

div#score button {
  display: none;
}
<div id="score">
  <button onClick="myScore.Reset();" id="myScore-reset">Reset Score</button>
  <div class="score-head">Score:</div>
</div>
0
Pascal Wirtz 8 nov. 2019 à 14:14

Je l'ai trié les gars!

Au lieu de cela, je viens d'utiliser un attribut de visibilité sur le bouton pour le masquer au démarrage de la page. Et puis appelé cet attribut dans une fonction pour HideButton ().

```
  function ShowResetButton() {
        document.getElementById("btnReset").style.visibility = "visible";
    }

```

Mais merci à tous pour votre contribution! j'apprécie vraiment cela!

Relax,

Bon codage!

0
Chris 10 nov. 2019 à 18:00