phpで配列の表示を指定のhtmlの場所に表示する方法を教えてください

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body id="timers">
  <input type="text" class="text" placeholder="タスク項目"> 
    <div id="timer">00:00.000</div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <select name="mintus" id ="mintus" class="mintus">
      <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 class="sum_way2">
      <div id="sum_way" class="sum_way"></div>
    </div>
    <div>
      <button id="sum">計算</button>
      <div id="sum_account" ></div>
      <button id="php">php</button>
      <button id="phpreturn">phpreturn</button>
    </div>
    <div id = "read_text"></div>
  <script src="main.js"></script>

  </script>
</body>
</html>

main.js
'use strict';
{
  var timeoutways =[];
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  const mintus = document.getElementById('mintus');
  const math = document.getElementById('sum');
  const sum_account = document.getElementById('sum_account');
  const timeway = document.getElementById('timeway');
  const sum_way = document.getElementById('sum_way');

  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 setButtonStateInitial() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

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

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

  // 残り時間の計算
  function calculateRemaining() {
    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
    const timeresult = mintus.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(regular) {
        const regulation = /(\d{2})(\d{2})(\d{3})/;
        const timemath = regular.replace(regulation,'$1分$2秒$3');
        sum_account.innerHTML = timemath;
    }

    // 途中経過の時間表示
    function way(){
      let 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 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 =  {
           'timetrack':timeTxt,
           'timemath2':timemath2,
        }
        $.ajax({
          url:"more.php",
          type:"post",
          dataType:"text",
          data:data,
        }).done(function(){
          setButtonStateInitial();
          timer.textContent = '00:00.000';
          elapsedTime = 0;
          sum_way.remove();
        }).fail(function(){
          alert('not');
        })
      })

      $('#phpreturn').click(function(){
        $.ajax({
          url:"less.php",
          type:"post",
          dataType:"text",
        }).done(function(){

        }).fail(function(){
          alert('not');
        })
      })
    })




  
  setButtonStateInitial();

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

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

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


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

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


    

}


// しっかり時間計算できてる部分

// 'use strict';

// {
//     var timeoutways =[];

//     const timer = document.getElementById('timer');
//     const start = document.getElementById('start');
//     const stop = document.getElementById('stop');
//     const reset = document.getElementById('reset');
//     const mintus = document.getElementById('mintus');
//     const math = document.getElementById('sum');
//     const sum_account = document.getElementById('sum_account');
//     const timeway = document.getElementById('timeway');
//     const sum_way = document.getElementById('sum_way');


//     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 setButtonStateInitial() {
//         start.disabled = false;
//         stop.disabled = true;
//         reset.disabled = true;
//     }

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

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

//     // 残り時間の計算
//     function calculateRemaining(timeTxt) {
//         const match = timeTxt.match(/^(\d+):(\d+.\d+)$/);
//         if (match == null) return;
//         const time = match[1] * 60 + match[2];
//         const result = mintus.children[mintus.selectedIndex].innerText * 60 - time;
//         sum_account.innerHTML = `${Math.floor(result / 60)}:${Math.round(result % 60 * 1000) / 1000}`;
//     }

//     // 途中経過の時間表示
//     function way(timeTxt){
//       // let timeTxt = timer.textContent.replace(":", "").replace(".", "");
//       const match2 = timeTxt.match(/^(\d+):(\d+.\d+)$/);
//       if (match2 == null) return;
//       const time2 = match2[1] * 60 + match2[2];
//       const result2 = mintus.children[mintus.selectedIndex].innerText * 60 - time2;
//       const timemath2 = `${Math.floor(result2 / 60)}:${Math.round(result2 % 60 * 1000) / 1000}`;


//       if(timeoutways[timeoutways.length-1]!==timemath2) timeoutways.push(timemath2);
//       sum_way.innerHTML=`<ul><ul><input>${timeoutways.join("</ul><ul><input>")}</ul></ul>`;
//     }


//     setButtonStateInitial();

//     start.addEventListener('click', () => {
//         setButtonStateRunning();
//         startTime = Date.now();
//         countUp();
//     });

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

//     reset.addEventListener('click', () => {
//         setButtonStateInitial();
//         timer.textContent = '00:00.000';
//         elapsedTime = 0;
//     });


//     math.addEventListener('click', () => {
//         stop.click();
//         calculateRemaining(timer.textContent);
//     });

//     timeway.addEventListener('click', () => {
//       way(timer.textContent);    
//     });
    

// }

more.php

<?php

  $array = [$_POST['timetrack']."\n\n",$_POST['timemath2']];
  $data = "data.txt";
  file_put_contents($data,$array )
 ?>

less.php

<?php

$data = "data.txt";
$fp = file($data);
var_dump($fp);

できている動作；ストップウォッチを起動、中間時間の表示をし、phpボタンを押すとdata.txtにストップウォッチの時間と中間時間の値を入れる。
phpreturnを押せば、data.txtに書き込まれた値を現状配列で表示している

やりたい実装；data.txtに入っている秒数の値と分、秒の値をそれぞれ秒数はindex.htmlの<div id="timer">00:00.000</div>部分に
中間時間はindex.htmlの<div class="sum_way2">に表示をしたいです。

考えたのは配列表示にしてecho [0]などの表示で記述と思いましたが、動作はしないので、記述方法の考え方はあっているのか、
記述するときにはどうすればいいのかをお教えいただければと思います。

退会済みユーザー

2021/05/28 08:57

jQueryを質問タグに加えるとよいのでは？

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

回答1件

ベストアンサー

more.phpやless.phpの出力をajax側で受け取れるよう、
header("Content-type: text/plain");
をphpコードに加えたほうがいいかもしれない。

でも、ただテキストデータとして受信しても、
それをjs上で加工して値として使うには面倒なので、
いっそjson文字列として返すようにするといいのではないかと。

その時は
header("Content-type: text/json; charset=UTF-8");
もしくは
header("Content-type: text/javascript; charset=UTF-8");
になり、
PHP: json_encode - Manualすればよいかと。

【PHP】Ajaxを使ってJSON形式で配列データを取得し、Webページ上に表示させる最低限の方法 - Qiita
jQuery $.ajaxで通信を行ってJSONを取得するサンプル | ITSakura