HPゲージを減らしたい

Question

勇者とスライムのHPの表示を減らしたい

グーをクリックしてスライムがチョキを出した場合スライムの体力が3下がるようにしたいです。console.log(slimeHP)をすると5に下がっているのですが、ブラウザ上の表示は8
のままなのでこの改善点を教えていただけると嬉しいです。

<div class="yusha" id="yusha">
    <div class="name">ゆうしゃ</div>
    <div class="lv">
      <dl>
        <dt>Lv</dt>
        <dd>1</dd>
      </dl>
    </div>
    <div class="hp">
      <dl>
        <dt>HP</dt>
        <dd class="remainingHP" id="remainingHP">10</dd>
      </dl>
    </div>
    <div class="mp">
      <dl>
        <dt>MP</dt>
        <dd>6</dd>
      </dl>
    </div>
  </div>
  <div class="slime">
    <div class="name">スライム</div>
    <div class="hp">
      <dl>
        <dt>HP</dt>
        <dd class="slimeHP" id="slimeHP">8</dd>
      </dl>
    </div>
  </div>
  <div class="monster">
    <div id="hand">ジャンケン</div>
    <img src="img/slime.png" alt="">
  </div>
  <div class="beneath">
    <div class="command">
      <div class="battle" id="battle">たたかう</div>
      <div class="escape" id="escape">にげる</div>
      <div class="defense" id="defense">ぼうぎょ</div>
      <div class="tool" id="tool">どうぐ</div>
    </div>
    <div class="janken" id="janken">
      <div class="gu" id="gu">グー</div>
      <div class="cho" id="cho">チョキ</div>
      <div class="par" id="par">パー</div>
      <div class="arrow1" id="arrow1">←</div>
    </div>
    <div class="herbs" id="herbs">
      <div class="herb1" id="herb1">やくそう</div>
      <div class="herb2" id="herb2">やくそう</div>
      <div class="herb3" id="herb3">やくそう</div>
      <div class="arrow2" id="arrow2">←</div>
    </div>
    <div class="text">
      <p>スライムがあらわれた！</p>
    </div>
  </div>

$('#gu').on('click', function () {
  const randomNumber = Math.floor(Math.random() * 3);

  if (randomNumber == 0) {
    $('#hand').html('チョキ');
    $('p').html('<p>スライムはチョキをだした！<br>スライムに3のダメージをあたえた！</p>');
    let slimeHP = document.getElementById('slimeHP').innerHTML
    slimeHP = slimeHP - 3;
  } else if (randomNumber == 1) {
    $('#hand').html('グー');
    $('p').html('<p>スライムはグーをだした！<br>おたがいに1のダメージをうけた！</p>');
    let yushaHP = document.getElementById('remainingHP').innerHTML
    let slimeHP = document.getElementById('slimeHP').innerHTML
    slimeHP = slimeHP - 1;
    yushaHP = yushaHP - 1;
  } else if (randomNumber == 2) {
    $('#hand').html('パー');
    $('p').html('<p>スライムはパーをだした！<br>ゆうしゃは3のダメージをうけた！</p>');
    let yushaHP = document.getElementById('remainingHP').innerHTML
    yushaHP = yushaHP - 3;
  }
});

Answer 1

確かめてはないですが、スライムhp計算後に
slimeHP.innerText = slimeHP;
この記述を追加したら行けそうです。
勇者も同様に（略）

（例）勝った場合
slimeHP = slimeHP - 3;
slimeHP.innerText = slimeHP;

確かめてみたら間違えてました。すみません
下の例で行けました。ただjqueryの表記方法ではないので、統一した方が良いと思います。
（例）勝った場合
slimeHP = slimeHP - 3;　
document.getElementById('slimeHP').innerText = slimeHP;

Comments

[taaaa]

ありがとうございます！
ちなみに
let slimeHP = document.getElementById('slimeHP').innerHTML
で一度代入しているのに
document.getElementById('slimeHP').innerText = slimeHP;
でないとブラウザに出力されていないのはどうしてなのでしょう？

[Jon_do]

解答の勝ったときの例で説明すると
slimeHP = slimeHP - 3;　
この時点で
let slimeHP = document.getElementById('slimeHP').innerHTML;

ではなく上書きされて

let slimeHP = 5;
となっています。
ただの5なので、ブラウザには表示されません。なのでコンソールログに5が表示されます。ブラウザに表示させるには
document.getElementById('slimeHP').innerText = slimeHP;と加えないと駄目だったわけです。
ちなみに
document.getElementById('slimeHP').innerHTML = slimeHP;
でもブラウザに表示されますが、
innerTextを使った理由はinnerHTMLはあまり使わないほうが良いという内容をどっかで見たからです。

[taaaa]

なるほどですね！勉強になります！ご丁寧にありがとうございました！