clickボタンを押すと1回目から中の処理を実行させたい

Question

前提・実現したいこと

clickボタンを押すと1回目から中の処理を実行させたい
ここに質問の内容を詳しく書いてください。
1回目のclickではカウント、2秒経過の表示がconsole上にでる。
2回目にそのほかのhiro(),setTi meの内容が実行される
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

  <span>敵の体力</span>
        <h1 id="enemy_hitpoint"></h1>
        <p id="ene_damage_view"></p>
        <span>勇者の体力</span>
        </span><h1 id="hiro_hitpoint"></h1>
        <span id="tern"></span><span id="hiro_damage_view"></span>
        <button id="btn" onclick="changeId()">周りを探索する</button>

// 敵の体力
let enemy_hitpoint = document.getElementById('enemy_hitpoint');
let ene_point = 3000;
let enemy_point = enemy_hitpoint.textContent = ene_point;

// 勇者の体力
let hiro_hitpoint = document.getElementById('hiro_hitpoint');
let hiro_point = 3000;
let hiroe_point = hiro_hitpoint.textContent = hiro_point;





let canClick = true;
let btn = document.getElementById('btn');

btn.addEventListener('click', ()=>{
  btn.innerHTML = '攻撃する';
},false);

//１度押すと２秒間clickできない
btn.addEventListener('click', function (e) {
    //canClickがfalseのときはここで処理を中断する
  if (!canClick) {
    return;
  }

  //canClickをfalseに変更して、2秒後にcanClickをtrueに戻す
  canClick = false;
  setTimeout(() => {
    canClick = true;
    console.log('2秒経過');

  }, 2000);
    hiro();
    ternCount();
    setTimeout(function(){enemy();},2000);
},false);




// --------------------------------------------------------

// 勇者の攻撃
let hiro = ()=>{
  while(ene_point>0){
    let hiro_damage = Math.floor(Math.random()*100);
    let enemy_damage_view = document.getElementById('ene_damage_view');

    if(hiro_damage > 99){
      enemy_damage_view.textContent = '会心の一撃';
    }else if(hiro_damage > 1){
      enemy_damage_view.textContent = hiro_damage + 'のダメージ';
    }else{
      enemy_damage_view.textContent = '攻撃を躱された';
    }

    enemy_hitpoint.innerHTML = ene_point;
    return ene_point = ene_point-hiro_damage;
  }

}

//敵の攻撃
let enemy = ()=>{

while(hiro_point>0){
  let enemy_damage =Math.floor(Math.random()*30);
  let hiro_damage_view = document.getElementById('hiro_damage_view');

  if(enemy_damage > 29){
      hiro_damage_view.textContent = enemy_damage + 'のダメージ!!';
  }else if(enemy_damage > 1){
      hiro_damage_view.textContent = enemy_damage + 'のダメージ';
  }else{
      hiro_damage_view.textContent = '攻撃を躱した';
  }

    hiro_hitpoint.innerHTML = hiro_point;
    return hiro_point = hiro_point-enemy_damage;

}
  }
//ID要素の変更
// "周りを探索"→”攻撃”へ
function changeId(btn){
  let obj = document.getElementById('btn');
  obj.btn = "btn1";

}
// ターンの表示
let countUp = 0;

function ternCount(){
  countUp++;
  let tern = document.getElementById('tern');
  tern.textContent = countUp;
}

試したこと

ここに問題に対して試したことを記載してください。
上から順に、とのことなので要素の順番を変えました

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
画像は一回clickした時の表示です。

Comments

[y_waiwai]

中の処理とはなんのことを言ってますか？
ちと意味不明です

[skilton]

申し訳ございません。
抜けておりましたので追加いたしました。
1回目のクリックでternCount();のみ表示され、
2回目のクリックでそのほかの処理(hiro(), setTime内の処理）が実行されている状態です。
これを１回目のクリックでまとめて表示させたいと思っております

[yambejp]

HTMLを追記してとりあえず現時点で間違っている動きが確認できるところまで
例示ください。

[Lhankor_Mhy]

説明が不足していると思います。
> clickボタンを押すと1回目から中の処理を実行させたい

ということは、

> 1回目のclickではカウント、2秒経過の表示がconsole上にでる。
> 2回目にそのほかのhiro(),setTi meの内容が実行される

1回目の動作をスキップしたい、ということですか？

[Lhankor_Mhy]

ああ、わかった。
「周りを探索」をクリックした時は2秒待ちたくない、みたいな話ですかね？

[skilton]

申し訳ございません。
こちらの質問が間違っておりました。

１回目のclick時にtern,hiro(),setTime..のダメージ表示はされるようになったのですが、体力3000の部分が(1回click時)変化されない感じです。

Answer 1

１回目のclick時にtern,hiro(),setTime..のダメージ表示はされるようになったのですが、体力3000の部分が(1回click時)変化されない感じです。

表示してから減らしているからだと思います。

    enemy_hitpoint.innerHTML = ene_point;  // まだ減っていない
    return ene_point = ene_point-hiro_damage;  // ここで減る

解決方法は、減らしてから表示すること、だと思います。

Comments

[skilton]

お騒がせしました。
ありがとうございます。
解決しました！