質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 64

skilton

score 1

前提・実現したいこと

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);

//1度押すと2秒間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した時の表示です。
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/10/10 17:08

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

    ということは、

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

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

    キャンセル

  • Lhankor_Mhy

    2019/10/10 17:30

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

    キャンセル

  • skilton

    2019/10/10 17:30

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

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 18:52

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる