javascriptで動作を実行するときにresetで値を初期値にする

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body id ="textcontent">
  <form name="resetvaule">
      <input type="text" class="text" placeholder="タスク項目">
      <div id="timer" name="timer">000:00.00</div>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
      <select name="mintue" id ="mintue">
        <option value="time_1" id="time1">30</option>
        <option value="time_2" id="time2">60</option>
        <option value="time_3" id="time3">90</option>
      </select>
      <button id="timeway">Timeway</button>
      <div id="sum_way" name="sum_way">
      </div>
      <div>
        <button id="sum">計算</button>
        <input type="text" id="sum_account">
        <button id="php"> php </button>
        <button id="phpreturn"> php  return</button>
      </div>
      <button type="button" onclick="resetbuttom">リセット</button>
  </form> 
  <script src="js/main.js"></script>

</body>
</html>

main.js
'use strict';
{

  const timeoutways = [];

  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  const math = document.getElementById('sum');
  const minutes = document.getElementById('mintue');
  const sum_account = document.getElementById('sum_account');
  const timeway = document.getElementById('timeway');
  const sum_way = document.getElementById('sum_way');
  const textcontent = document.getElementById('textcontent');




  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;
    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  function setButtun () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

  function setButtunRunning () {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }

  function stopButtun () {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }

  function calculateRemaining(){
    const timeTxt = timer.textContent.replace(":", "").replace(".", "");
    const timeresult = minutes.value;
    switch(timeresult) {
      case 'time_1':
        const result1 = String(3000000 - timeTxt);
        reguler(result1);
        break;
      case 'time_2':
        const result2 = String(6000000 - timeTxt);
        reguler(result2);

        break;
      case 'time_3':
        const result3 = String(9000000 - timeTxt);
        reguler(result3);
        break;
    }
   
  }
  //正規表現
  function reguler(reguler) {
    const regulation =/(\d{2})(\d{2})(\d{3})/;
    const timemath = reguler.replace(regulation,'$1分$2秒$3')
    sum_account.value = timemath;
  }

  //途中計算
  function way() {
    const timeTxt = timer.textContent.replace(":", "").replace(".", "");
    const regulation2 =/(\d{2})(\d{2})(\d{3})/;
    const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3');

    timeoutways.push(timemath2);
    sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`;

  };


  // ajax 処理
  $(function() {

    $('#php').click(function(){

      const timeTxt =  timer.textContent.replace(":", "").replace(".", ""); 
      const timeresult = minutes.value;

      const regulation2 =/(\d{2})(\d{2})(\d{3})/;
      const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3');
      timeoutways.push(timemath2);

      sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`;
          const data = {
        'timeattack':timeTxt,
        'timemath2':timemath2,
      }
      $.ajax({
        url:"more.php",
        type:"post",
        dataType:"text",
        data:data,
      }).done(function() {
//この部分で動作の時にストップウォッチの値を空にしたい
        resetbuttom();
      }).fail(function() {
        alert("not");

      });
    });
  });

//resetを追加部分
  function resetbuttom() {
    document.resetvaule.reset();
  }


  setButtun();
  resetbuttom()
 
  start.addEventListener('click', () => {
    setButtunRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    stopButtun();
    clearTimeout(timeoutId);
    elapsedTime += Date.now()-startTime;
  });

  reset.addEventListener('click', () => {
    setButtun();
    timer.textContent = '000:00.000';
    elapsedTime = 0;
  });

  math.addEventListener('click', () => {
    stop.click();
    calculateRemaining();
  })
  
  timeway.addEventListener('click',() =>{
    way();

  })
}

more.php
<?php

  $array = [$_POST['timeattack']."\n\n",$_POST['timemath2']];


    $data = "data.txt";
    file_put_contents($data,$array);

data.txt

less.php

現状の動作としてtimeway(途中時間の表示)計算（目標時間と表示時間の差を計算）php (表示時間の値を別ファイルに記入)の行動をすると勝手に値がリセットされるので
phpの動作のみのときにajaxを使って動作をしたいです。

formタグを追加すると勝手に値がリセットしてしまう。
原因がわからないので、
なぜ勝手に動作をしてしまうのか、html。記述やどの箇所が原因なのかを
具体的なアドバイスをいただきたいです。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

冗長に丸投げしているのでストップウォッチとphpの関係が今ひとつ伝わってきません
結局何がしたいのでしょうか？
apiにajaxしたときにhtmlのストップウォッチをリセットするなら

clearTimeout(timeoutId)するのと
#timerのテキストを00:00:00にする

だけでよいのでは？

投稿2021/05/28 01:09

yambejp

総合スコア114863

kobayashi.j

2021/05/28 01:25

ごしてきありがとうございます。 resetの動作の部分をうめこんだらできました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

javascriptで動作を実行するときにresetで値を初期値にする

関連した質問