phpでJavaScriptの値を表示させる

indexhtml.php

<!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>
  <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" class="sum_way">

  </div>
  <div>
    <ul id="timers"></ul>
    <button id="sum">計算</button>
    <input type="text" id="sum_account">
    <button id="php"> php </button>
  </div>
  <div id="read_text"></div>
  <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');



  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 data = {
        'timeattack':timeTxt,
      }
      console.log()
      $("#read_text").load('more.php?timeattack=$(timeTxt)');
    });
  });




  setButtun();

 
  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


header('Content-type: text/plain; charset= UTF-8');

if(isset($_GET['timeattack'] )){
  $timer =$_GET['timeattack'];
  echo $timer;
}else {
  echo 'こんにちわ';
}

 
```
実行したいこと
ajaxを使ってphpで時間の表示をechoなど使い表示をする

現状ストップウォッチの時間や計算後の時間を表示したいが値が取れず困っています。
何か解決手段のアドバイスをお願いします。


背景としては今の時間管理ツールは一つのタスクしか時間を表示できないため、他のタスクが来たときに新しく時間管理ができるようにする

例：Aタスク発生→途中の時間の表示を一旦DBやtextに格納→新たにBタスクを開始→Bタスクを終了→途中のAタスクを開始
という流れをしたいです

m.ts10806

2020/12/09 07:23

javasvript →JavaScriptかと思います。あと、現状何が起きてるのでしょう。しかし、PHP必要ないのでは。何にどう使いたいのか、前提や背景を記載しないと何とも言えないと思いますし、そもそも、前の質問は放置されてますが解決したのでしょうか。 https://teratail.com/questions/305600 解決してないならAjax使おうとなんだろうとできないのは当然かと思いますが・・。 jQueryの記法とVanillaJSの記法が混ざってるのは可読性落ちますしメンテナンス性も低いです。jQueryのバージョンも低くhttpでリンクしています。参考にしている資料も古いのでは・・・

kobayashi.j

2020/12/09 07:31

前回の問題は解決しました。背景としては今の時間管理ツールは一つのタスクしか時間を表示できないため、他のタスクが来たときに新しく時間管理ができるようにする例：Aタスク発生→途中の時間の表示を一旦BDやtextに格納→新たにBタスクを開始→Bタスクを終了→途中のAタスクを開始という流れをしたいです

m.ts10806

2020/12/09 07:32 編集

>BD ブルーレイディスクですかね。プログラムは書いたとおりにしか動かないので、固有名詞や定義名の書き間違いはそれだけで致命的になります。

kobayashi.j

2020/12/09 07:35

DBですね

m.ts10806

2020/12/09 07:43

javasvript BD 修正してください。それだけで「え、そこからか」となる人（引き返す人）、案外多いんです。質問者にとってデメリットしかないですよ。

kobayashi.j

2020/12/09 07:46

ご指摘ありがとうございます

m.ts10806

2021/01/08 05:56 編集

上記から1か月何の音沙汰もないまま「解決済み」とされたようですが、どうなって解決とされたのでしょうか。 https://teratail.com/help/question-tips#questionTips4-2

kobayashi.j

2021/01/08 05:58

解決はできてなく間違い得て押してしまいました。

m.ts10806

2021/01/08 06:06

「受付中」に戻すことができるはずなので、間違いなら戻してください。そして、可能なら、きちんと解決に向けた活動をしてください。

kobayashi.j

2021/01/08 06:10

ご指摘ありがとうございます。

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

回答2件

}).done(function() {

Ajax成功時に何も受け取ってません。
リファレンスにもある通り、doneでは様々な返却値があり、
その中に呼び出したURLの処理結果も含まれます。

deferred.done()

通常は下記のように受け取ります（調べればこの手の受け取り方を紹介している記事は沢山出てきます。

js
1}).done(function(data, textStatus, xhr){
2

なお、返却値は実行時のdataTypeと実行先URLでのレスポンスヘッダーによりますので、それによってコールバックの処理を考えてください。（結局はどう使いたいか次第）

投稿2020/12/09 07:48

m.ts10806

総合スコア80875

kobayashi.j

2021/01/08 07:09

調べても　done(function(data, textStatus, xhr)のdata, textStatus, xhrの方法が見つからなく、参考の記事など教えていただいてもよろしいでしょうか？

kobayashi.j

2021/01/13 01:45

js側 $(function() { $('#php').click(function(){ const timeTxt = timer.textContent.replace(":", "").replace(".", ""); const data = { timeattack:timeTxt, } console.log(data); $.ajax({ url:"./more.php", type:"post", dataType:"text", data:data, processData: false, }).done(function(data) { alert(data); $("#read_text").load('more.php'); }).fail(function() { alert("not"); }); }); }); php側 header('Content-type: text/plain; charset= UTF-8'); if(isset($_POST['timeattack'] )){ $timer =$_POST['timeattack']; // echo filter_input(INPUT_POST, 'timeattack'); echo $timer; }else { echo 'こんにちわ'; にして　こんにちわが表示されます。　　データの表示ができてないのでその点について　おしえていただきたいです。

m.ts10806

2021/01/13 01:48

PHPのコードそれなら構文エラーです。 JavaScript側でレスポンス確認するならalert()ではなくconsole.log()のほうが良いでしょう。

kobayashi.j

2021/01/13 06:52

more.php が再読みこみされていたため。js内のコードを編集しました。 // ajax 処理 $(function() { $('#php').click(function(){ const timeTxt = timer.textContent.replace(":", "").replace(".", ""); const data = { 'timeattack':timeTxt, } console.log() $("#read_text").load('more.php?timeattack=$(timeTxt)'); // $.ajax({ // type:"get", // dataType:"text", // data:data, // processData: false // }).done(function(datatime) { // console.log(datatime); // $("#read_text").load('more.php?timeattack=aaa'); // }).fail(function() { // alert("not"); // }); timeTxt の値をphp側に渡し、表示をしたいですが、構文がえらーが見当たらないのですが、、、

m.ts10806

2021/01/13 06:54

質問本文に追記してください。基本的には「質問に対する回答」なので、ちょっとした補足ではなくコード自体なのであれば質問本文に追記すべきです。コメントアウトばかりのコードを提示されても非常に困りますけどね。

kobayashi.j

2021/01/13 07:01

失礼しました

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

自己解決

main.js
1
2'use strict';
3{
4
5  const timeoutways = [];
6
7  const timer = document.getElementById('timer');
8  const start = document.getElementById('start');
9  const stop = document.getElementById('stop');
10  const reset = document.getElementById('reset');
11  const math = document.getElementById('sum');
12  const minutes = document.getElementById('mintue');
13  const sum_account = document.getElementById('sum_account');
14  const timeway = document.getElementById('timeway');
15  const sum_way = document.getElementById('sum_way');
16  const textcontent = document.getElementById('textcontent');
17
18
19
20
21  let startTime;
22  let timeoutId;
23  let elapsedTime = 0;
24
25  function countUp() {
26    const d = new Date(Date.now() - startTime + elapsedTime);
27    const m = String(d.getMinutes()).padStart(2, '0');
28    const s = String(d.getSeconds()).padStart(2, '0');
29    const ms = String(d.getMilliseconds()).padStart(3, '0');
30    timer.textContent = `${m}:${s}.${ms}`;
31    timeoutId = setTimeout(() => {
32      countUp();
33    }, 10);
34  }
35
36  function setButtun () {
37    start.disabled = false;
38    stop.disabled = true;
39    reset.disabled = true;
40  }
41
42  function setButtunRunning () {
43    start.disabled = true;
44    stop.disabled = false;
45    reset.disabled = true;
46  }
47
48  function stopButtun () {
49    start.disabled = false;
50    stop.disabled = true;
51    reset.disabled = false;
52  }
53
54  function calculateRemaining(){
55    const timeTxt = timer.textContent.replace(":", "").replace(".", "");
56    const timeresult = minutes.value;
57    switch(timeresult) {
58      case 'time_1':
59        const result1 = String(3000000 - timeTxt);
60        reguler(result1);
61        break;
62      case 'time_2':
63        const result2 = String(6000000 - timeTxt);
64        reguler(result2);
65
66        break;
67      case 'time_3':
68        const result3 = String(9000000 - timeTxt);
69        reguler(result3);
70        break;
71    }
72   
73  }
74  //正規表現
75  function reguler(reguler) {
76    const regulation =/(\d{2})(\d{2})(\d{3})/;
77    const timemath = reguler.replace(regulation,'$1分$2秒$3')
78    sum_account.value = timemath;
79  }
80
81  //途中計算
82  function way() {
83    const timeTxt = timer.textContent.replace(":", "").replace(".", "");
84    const regulation2 =/(\d{2})(\d{2})(\d{3})/;
85    const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3');
86
87    timeoutways.push(timemath2);
88    sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`;
89
90  };
91
92
93  // ajax 処理
94  $(function() {
95
96    $('#php').click(function(){
97      const textcontent = document.getElementById('textcontent');
98
99      const timeTxt =  timer.textContent.replace(":", "").replace(".", ""); 
100      const timeresult = minutes.value;
101
102      const regulation2 =/(\d{2})(\d{2})(\d{3})/;
103      const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3');
104      timeoutways.push(timemath2);
105
106      sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`;
107          const data = {
108        'timeattack':timeTxt,
109        'timemath2':timemath2,
110      }
111      $.ajax({
112        url:"more.php",
113        type:"post",
114        dataType:"text",
115        data:data,
116      }).done(function() {
117        console.log(textcontent);
118        textcontent.reset();
119      }).fail(function() {
120        alert("not");
121        $("#read_text").load('less.php');
122
123      });
124    });
125  });
126
127//  $(function() {
128//    $('phpreturn').click(function() {
129//     $("#read_text").load('less.php');
130//    })
131//  }) 
132 
133
134
135  setButtun();
136
137 
138  start.addEventListener('click', () => {
139    setButtunRunning();
140    startTime = Date.now();
141    countUp();
142  });
143
144  stop.addEventListener('click', () => {
145    stopButtun();
146    clearTimeout(timeoutId);
147    elapsedTime += Date.now()-startTime;
148  });
149
150  reset.addEventListener('click', () => {
151    setButtun();
152    timer.textContent = '000:00.000';
153    elapsedTime = 0;
154  });
155
156  math.addEventListener('click', () => {
157    stop.click();
158    calculateRemaining();
159  })
160  
161  timeway.addEventListener('click',() =>{
162    way();
163
164  })
165}
166

more.php
1<?php
2
3  $array = [$_POST['timeattack']."\n",$_POST['timemath2']];
4
5
6    $data = "data.txt";
7    file_put_contents($data,$array,FILE_APPEND);
8