常連

このページに飛ぶ前に削除ボタンがあり削除依頼をすると
echo "削除失敗です"←こちらがてできて失敗してしました。
参考記事が古かったのか、自分の書き方が悪いのか…
初期的な質問なのですが、削除がうまく機能しないのでしょうか。
また削除方法を教えてください。
```ここに言語を入力
if(empty($_POST)) {
	echo "<a href='thanks.php'>thanks.php</a>←こちらのページからどうぞ";
	exit();
}else{
	if (!isset($_POST['id']) ){
		echo "IDエラー";
		exit();
	}else{
		//プリペアドステートメント
		$stmt = $mysqli->prepare('DELETE FROM mydb WHERE id = ?');
		
		if($stmt){
			//プレースホルダへ実際の値を設定する
			$stmt->bind_param('i', $id);
			$id = $_POST['id'];
					
			$stmt->execute();
			
			//変更された行の数が1かどうか
			if($stmt->affected_rows == 1){
				echo "削除いたしました。";
			}else{
				echo "削除失敗です";
			}
		
			//ステートメント切断
			$stmt->close();
		}else{
			echo $mysqli->errno . $mysqli->error;
		}
	}
}
 
// データベース切断
$mysqli->close();
		
?>
```

下記が飛ぶ前のファイルの削除ボタンのコードになります

```ここに言語を入力
<form action="fix.php" method="post">
		<input type="submit" name="delete" value="削除する">
		<input type="hidden" name="id" value="<?=$row['id']?>">
		</form>
```


phpの表示画面で削除ボタンを押して、mysqlのデータを一行削除したい

### 前提・実現したいこと
現在PHPで削除機能を実装しております。実現したいことは削除ボタンを押すと'本当に削除しますか？'のポップアップが出てきて、OKを押すと登録されているデータが削除されるという流れです。

### 発生している問題・エラーメッセージ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-17/f421b391-1dab-4ecc-aea5-acbffbeab05f.gif)

contact.phpの削除ボタンを押すとポップアップが出てOKを押すとdelete.phpへ飛び、Idが渡されているのですが、処理が完了せず、delete.phpの画面のまま止まってしまいます。OKを押した後、削除処理が実行され、contact.phpの画面へ戻り、一覧からデータを削除するにはどうすればいいでしょうか？



### ソースコード
```php

    <form action="" method="post">
    <table>
      <th>氏名</th>
      <th>フリガナ</th>
      <th>電話番号</th>
      <th>メールアドレス</th>
      <th>お問い合わせ内容</th>
      <th></th>
      <th></th>
      <?php if( !empty($message_array) ){ ?>
      <?php foreach( $message_array as $value ){ ?>
      <tr>
      <td><p><?php  echo $value['name']; ?></p></td>
      <td><p><?php  echo $value['kana']; ?></p></td>
      <td><p><?php  echo $value['tel'];  ?></p></td>
      <td><p><?php  echo $value['email'];  ?></p></td>
      <td><p><?php  echo nl2br($value['body']);  ?></p></td>
      <td><a href="edit.php?message_id=<?php echo $value['id']; ?>" name="edit">編集</a></td>
      <td><a href="delete.php?message_id=<?php echo $value['id']; ?>" onclick="return confirm('本当に削除しますか？')" name="delete">削除</a></td>
      </tr>
      <?php } ?>
      <?php } ?>
    </table>
  </form>
  <?php endif; ?>
  </body>
</html>

```

```php 
 

<?php 

 require_once(ROOT_PATH .'Models/Db.php');

$value = null; 

if( !empty($_GET['message_id']) && empty($_POST['message_id']) ) {
  // SQL作成
	$stmt = $pdo->prepare("SELECT * FROM contacts WHERE id = :id");

	// 値をセット
	$stmt->bindValue( ':id', $_GET['message_id'], PDO::PARAM_INT);

	// SQLクエリの実行
	$stmt->execute();

	// 表示するデータを取得
	$message_data = $stmt->fetch();

  // 投稿データが取得できないときは管理ページに戻る
	if( empty($message_data) ) {
		echo '投稿データが取得できませんでした';
	}
} elseif ( !empty($_POST['message_id']) ) {
  // トランザクション開始
  $pdo->beginTransaction();

  try {

    // SQL作成
    $stmt = $pdo->prepare("DELETE FROM contacts WHERE id = :id");

    // 値をセット
    $stmt->bindValue( ':id', $_POST['message_id'], PDO::PARAM_INT);

    // SQLクエリの実行
    $stmt->execute();

    // コミット
    $res = $pdo->commit();

  } catch(Exception $e) {

    // エラーが発生した時はロールバック
    $pdo->rollBack();
    echo $e;
  }

  // 削除に成功したら一覧に戻る
  if( $res ) {
    header("Location: contact.php");
    exit;
  }
}

// データベースの接続を閉じる
$stmt = null;
$pdo = null;

?>
```

```php


<?php 
// 使用する変数を初期化
$name = null;
$kana = null;
$tel= null;
$email = null;
$body = null;

$message_array = array();
$message_date = null;
$pdo = null;
$stmt = null;
$res = null;
$option = null;

// データベースに接続
try {

  $option = array(
      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
      PDO::MYSQL_ATTR_MULTI_STATEMENTS => false
  );
  $pdo = new PDO('mysql:charset=UTF8;dbname=casteria;host=127.0.0.1;port=8111', 'root', '', $option);

} catch(PDOException $e) {

  // 接続エラーのときエラー内容を取得する
  $error_message[] = $e->getMessage();
}
```

PHPのポップアップ確認後の削除機能が作動しない

### 実現したいこと

MySQLから引っ張ってきたテーブル表示（tableタグのtdタグ）の削除ボタンから該当レコードを削除したい。

### 前提

vscode、xamppを使っています。
https://qiita.com/wakahara3/items/4bf9e00e0896477897e6
上記を参考に、
MySQLから表示させたテーブルの表示の削除ボタンからレコードを削除する仕組みを作り、id=1のレコードを削除することに成功しましたが、
その後なぜかコードを変えてないのに、削除出来たり出来なくなったりしました。もちろんスーパーリロードしています。
削除されていなくても、（index4.phpの削除ボタンを押すと、delete.phpに飛び、try-cacthで削除する仕組みですが、）
キャッチされずにエラーメッセージにならず削除しましたという表示になります。
phpmyadminからテーブルを確認しても削除されていません。
しかもindex4.phpからの遷移ではなく、delete.phpをアドレスバーに直打ちしても、Warning: Undefined array key "id" inのエラーともに、「削除しました」の文字が出てきて、cacthが正常にできていないようにも思えます。
コードのどこが間違っているか教えて頂けないでしょうか？

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

```
なし
```

### 該当のソースコード

```index4.php
<?php
// データベース接続
try{
	$db = new PDO('mysql:dbname=crm;host=localhost;charset-utf8','root','your_password');
} catch(PDOException $e) {
	echo '接続エラー:' . $e->getMessage();
	exit;
}

// //データベース取得
$sql = 'select trueid, id, name, gender, score,standardDay,remind from list';
$rec = $db->prepare($sql);
$rec->execute();
$rec_list = $rec->fetchAll(PDO::FETCH_ASSOC);


//データベース切断
$db = null;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    
    <title>Document</title>
</head>
<body>
    

<br>

<div class="navigation">
  <a href="index.php">データベース一覧ページ</a>
</div>

<table border="1" style="border-collapse: collapse" id="csv">
<tr>
    <th>インクリメントID</th>
    <th>ID</th>
    <th>名前</th>
    <th>性別</th>
    <th>スコア</th>
    <th>日付</th>
    <th>スコア２</th>
</tr>


<?php foreach ($rec_list as $rec) { ?>
<tr>
<td><?php echo $rec['trueid'];?></td>
<td><?php echo $rec['id'];?></td>
<td><?php echo $rec['name'];?></td>
<td><?php echo $rec['gender'];?></td>
<td><?php echo $rec['score'];?></td>
<td><?php echo $rec['standardDay'];?></td>
<td><?php echo $rec['remind'];?></td>


 <td class="delete"><a href="delete.phpid=" class="link_confirm">削除</a></td> 
</tr>
<?php } ?>
</table>

<script src="input.js"></script>

</body>
</html>


```

```delete.php

<?php
// データベース接続
try{
	$db = new PDO('mysql:dbname=crm;host=localhost;charset-utf8','root','your_password');
        
        $stmt = $db->prepare('DELETE FROM list WHERE id = :id');

        $stmt->execute(array(':id' => $_GET["id"]));

        echo "削除しました";
      

} catch(Exception $e) {
	echo 'エラー発生:' . $e->getMessage();
	exit;
}



//データベース切断
$db = null;

?>
<a href="index4.php">データベース一覧へ</a>
```

```input.js
$(function() {
    
  $("tr td:nth-child(1)").addClass("Increments");
  //  $("tr td:last-child").after('<td><form method="post" action="sent.php"><button class="save" value="1" type=submit>保存</button></form></td>');
  //  $("tr td:last-child").after('<td><button class="save" value="1" type=submit>保存</button></td>');
  
  
  $('td').each(function(i){
      
    var text=$(this).text();
    $(this).attr('name',text);
    $(this).attr('value',text);
   
  });
 


  $('.delete a').each(function(i){
    $(this).attr('href','delete.php?id='+(i+1));
    
  });


 

});   




document.addEventListener('dblclick',({target})=>{

if(target.classList.contains('Increments')||target.classList.contains('save'))
  return;

if(target.matches('#tb1 td')){
target.contentEditable=true;
target.focus();
}
});
document.addEventListener('keydown',e=>{
if(e.key=="Enter"){
  var text=e.target.innerText;
  e.target.setAttribute('value', text)
  e.target.blur();
}
});
document.addEventListener('blur',({target})=>{
if(target instanceof HTMLElement && target.matches('[contentEditable]')){
  var text=target.innerText;
  target.setAttribute('value', text)
  target.removeAttribute('contentEditable');
}
},true);



// 削除ボタンダイアログ
document.addEventListener('DOMContentLoaded', function() {
  const linkConfirms = Array.prototype.slice.call(document.querySelectorAll('.link_confirm'));
  linkConfirms.forEach(function(linkConfirm) {
      linkConfirm.addEventListener('click', function(event) {
          const resultConfirm = confirm('外部のサイトに移動します。よろしいですか？');
          if(!resultConfirm) {
              event.preventDefault();
          }
      });
  });
}, false);
```
### 試したこと

index4.phpの削除ボタンを押すと、delete.phpに飛ぶ前にダイアログが出るのでその影響かもと思いましたが、
ダイアログを出さないようにしても解決しませんでした。

また、https://fukuroblog.com/todo-delete/こちらのサイトを参考に
下記のようにdelete.phpを書き換えても改善しません。

```delete.php
<?php
  

    $id = $_GET['id'];

    try {
        $db = new PDO('mysql:dbname=crm;host=localhost;charset-utf8','root','your_password');

        // //データベース取得
        $sql = 'select trueid, id, name, gender, score,standardDay,remind from list';
        $rec = $db->prepare($sql);
        $rec->execute();
        $rec_list = $rec->fetchAll(PDO::FETCH_ASSOC);
            

        $sql = "DELETE FROM list WHERE id = :id";
        $stmt = $db->prepare($sql);
        $stmt->bindParam(":id", $id);
        $stmt->execute();

        echo "削除しましたよ";
      
      
       
        exit;
      } catch (Exception $e) {
        echo $e->getMessage();
        die();
      }
?>
```

### 開発環境
PHP 8.2.4

MYSQL PHPでの レコードの削除ができたりできなかったりする（エラーメッセージはない）DELETE文

### 実現したいこと
テキストボックスで空入力をした時、追加できないようにしたい

### 発生している問題・分からないこと
問題はテキストボックスが空の状態でも追加を押すと追加される



### 該当のソースコード

```CSS
ul li {
    list-style: none;
    overflow-wrap: break-word;
    text-align: left;
    display: flex;
}

ul li .complete-btn{
    border-radius: 8px;
    background-color: #4D89FF;
    color: white;
    margin-left: auto;
    
}    
   
ul li .complete-btn:hover{
    background-color: #9ACFFF;
    cursor: pointer;
   
    
}

ul li .delete-btn{
    border-radius: 8px;
    background-color: #cc3300;
    color: white;
    margin-right: 0;
}

ul li .delete-btn:hover{
    background-color: #FF6A6A;
    cursor: pointer;
   
}

ul li .return-btn{
    border-radius: 8px;
    background-color: #03D00B;
    color: white;
    margin-left: auto;
}
ul li .return-btn:hover{
    background-color: #95FF99;
    cursor: pointer;
}

```

```body
<body> 
    
    <div class="input-area" >
        <input id="add-text"   placeholder="Todoを入力" />
         <button id="add-button">追加</button>
    </div>

    <div class="container">
        
        <div class="incomp-area">
            <p class="area-title">タスク</p>
            <ul id="incomp-area-list">
            </ul>
        </div>

        
        <div class="comp-area">
            <p class="area-title">完了</p>
            <ul id="comp-area-list">
            </ul>
        </div>
    </div>

    <script src="src/index.js">
    const input = document.getElementsByClassName('input-area');
    const btn = document.getElementById('add-button');
    const incompList = document.getElementById('incomp-area-list');
    const compList = document.getElementById('comp-area-list');


    btn.addEventListener('click', e => {
            e.preventDefault();
            if (input.value.length > 0) {
               const task = addText.value;
               addTasks(task);
               addText.value = '';
            }
    });

    //タスクリストに追加
    const addTasks = (task) => {
    const li = document.createElement("li");
    inCompList.appendChild(li);
    li.innerHTML = task;


    //タスクリストに追加
    //btn.addEventListener('click', function() {
            //const text = document.createTextNode(addText.value);
            //document.getElementById("add-text").value = "";
            //const li = document.createElement('li');
            //作成したliタグに入力した値textを追加
            //li.appendChild(text);
            //incompList.appendChild(li);

    
           // 完了ボタン
            const completeBtn = document.createElement('button');
              completeBtn.classList.add('complete-btn');
              completeBtn.textContent = '完了';
              li.append(completeBtn);

           // 削除ボタン
            const deleteBtn = document.createElement('button');
              deleteBtn.classList.add('delete-btn');
              deleteBtn.textContent = '削除';
              li.append(deleteBtn);

           // 削除ボタンを押した際の処理
              deleteBtn.addEventListener('click', function() {
                  li.remove();
                });
    
           // 完了ボタン押した際の処理
           completeBtn.addEventListener('click', function() {
                compList.append(li);
      
           // 完了ボタンと削除ボタンを消す
                completeBtn.remove();
                deleteBtn.remove();

          // 戻すボタン
                let returnBtn = document.createElement('button');
                returnBtn.classList.add('return-btn');
                returnBtn.textContent = '戻す';
                li.append(returnBtn);
      
          // 戻すボタン押した際の処理
                returnBtn.addEventListener('click', function() {
                   incompList.append(li);

          // 戻すボタンを消す
                   returnBtn.remove();
        
          // 完了ボタンと削除ボタン
                    li.append(completeBtn, deleteBtn);
                });
            });
    };
    
   
  


    </script>
</body>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
試したこと
クリックイベント時にe.preventDefault();を使用したり、if文で判定文を入力してみたが、変化なしでした。初心者のため、わかりやすくアドバイス頂けたら嬉しいです。

### 補足
特になし

todoリスト　空入力で処理できないようにしたい

HTML5にてtableの行ごとにFormを作成して、それぞれの値でSubmitで値をPOSTしたいと考えております。

まずは下記のようにHTMLを書いて実行した場合、正常に動作しました。
```html
<table class="table table-bordered">

<thead>
	<tr class="active">
		<th>ID</th>
		<th>種類</th>
		<th>名前</th>
		<th>&nbsp;</th>
	</tr>
</thead>

<tbody id="tbody">
 <form action="/test/test.php" method="post" name="list" id="list">
	<tr>
	    <td class="table-text"><div><input type="hidden" name="id" value="1"> 1</div></td>
		<td class="table-text"><div><input type="hidden" name="type" value="猫">猫</div></td>
		<td class="table-text"><div><input type="hidden" name="name" value="にゃんすけ">にゃんすけ</div></td>
		<td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td>
	</tr>
  </form>
  <form action="/test/test.php" method="post" name="list1" id="list1">
	<tr>
	    <td class="table-text"><div><input type="hidden" name="id" value="2">2</div></td>
		<td class="table-text"><div><input type="hidden" name="type" value="犬">犬</div></td>
		<td class="table-text"><div><input type="hidden" name="name" value="わんすけ">わんすけ</div></td>
		<td><button class="btn btn-lg btn-primary" name="" value="cat" type="Submit">取得</button></td>
	</tr>
  </form>
</tbody>
</table>
```
![イメージ説明](305b8a46f08e4d010541478a4bb20af6.png)
上記のように<tr>タグを<form>タグで括って予定通り送信したデータも分けて実行できたのですが
このtableの中身をJavascript(Jquery?)で追加していく形で下記のように書きました。

```html
<table class="table table-bordered">
	
	<thead>
		<tr class="active">
			<th>ID</th>
			<th>種類</th>
			<th>名前</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
	
	<tbody id="tbody">
	</tbody>
</table>
<button type="button" class="btn btn-lg btn-primary" onclick="test_append();"/>

```

```javascript
function test_append(){
	$('#tbody').append('<form action="/test/test.php" method="post" name="list1" id="list1"></form>');
	$('#list1').append('<tr id=tr1></tr>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="id" value="1"> 1</div></td>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="type" value="猫">猫</div></td>');
	$('#tr1').append('<td class="table-text"><div><input type="hidden" name="name" value="にゃんすけ">にゃんすけ</div></td>');
	$('#tr1').append('<td><button class="btn btn-lg btn-primary" name="" value=![イメージ説明](2c98142d695b96d713beb0c6c7998474.png)type="Submit">取得</button></td>');
}
```
![イメージ説明](6d74f61f0e676945442660e4110757b2.png)

上記のように表示が崩れてしまいます。
他にも"</form>"を最後に括ったり、"<form>"と"<tr>"を同じ親の要素に並べてみたりやってみたのですが、期待の挙動になるものはありませんでした。
始めからHTMLにて記載しておく方法とJavaScriptにて追加していくやり方ではなぜ違う挙動になるのでしょうか？

また、私のように行ごとにデータをSubmitしたい場合どのように行うのが一般的なのでしょうか？
(そもそも行ごとにSubmitすることはよくないこと？)

勉強始めでわからないことばかりで的外れな質問かもしれませんが、よろしくお願い致します。

html tableの行ごとにformを作成

### 前提・実現したいこと

飲食店がお店の入店可否に対してサイト内で〇✖の表示とそれに対するコメントを切り替えられる機能を作っています。
店側がログイン後、店側の入店可否切り替えフォームからログインされた店の〇✖を切り替える下記コードでつまずいています。

現状データベースの更新は出来ておらず、エラーも出ていません。
DBの接続確認、ログイン機能の確認は出来ています。

### 該当のソースコード

```ここに言語名を入力
<?php
session_start();
try {
$pdo = new PDO('mysql:host=localhost;dbname=reserve;charset=utf8','root','',
array(PDO::ATTR_EMULATE_PREPARES => false));
} catch (PDOException $e) {
 exit('データベース接続失敗。'.$e->getMessage());
}
if(!isset($_SESSION['user'])) {
  header("Location: shop_submit.php");
}

// ユーザーIDからユーザー名を取り出す
$query = "SELECT * FROM shop WHERE id=".$_SESSION['user']."";
$result = $pdo->query($query);

if (!$result) {
  print('クエリーが失敗しました。' . $pdo->error);
  $pdo->close();
  exit();
}

// ユーザー情報の取り出し
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
  $name = $row['name'];
  //$yesno = $row['yesno'];
}
// セッションの開始

$yesno = htmlspecialchars($_SESSION['yesno'], ENT_QUOTES, 'UTF-8');
$comment = htmlspecialchars($_SESSION['comment'], ENT_QUOTES, 'UTF-8');
// 接続設定
$conn = new PDO('mysql:host=localhost;dbname=reserve;charset=utf8','root','');
$conn->setAttribute(PDO::ATTR_CASE, PDO::CASE_LOWER);
$conn->setAttribute ( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$conn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

// データの変更
$sql = "update shop set yesno = ':yesno', comment = ':comment' where id=".$_SESSION['user']."";
$stmt = $conn -> prepare($sql);
$params = array(':yesno' => ".$yesno.", ':comment' => ".$comment.");
$stmt -> execute($params);
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>入店可否登録</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="header-right">
      <p style="text-align:center;"><?php echo $name; ?>専用ページ</p>
    </div>
    <div style="text-align:center;margin:50px 0;">
    <h3>登録が完了しました</h3>
    <input style="margin-top:20px;" type="button" onclick="location.href='shop_home.php'"value="トップページへ戻る">
    <input type="button" onclick="location.href='shop_form.php'"value="さらに登録する">
    </div>

  </body>
</html>


```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

データベース内の一部をPHPの入力フォームから更新させたい

### 前提

vscodeにて、
Incrementsというクラス名がついたtd以外のtd要素を、ダブルクリックしたらinput要素に変えて編集できるようにしたく
（ エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく）
実装しましたがinputタグに変わらず困っています。
何が間違っているのか分かりません。

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

```
特になし
```

### 該当のソースコード

```index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    <title>Document</title>
</head>
<body>
<table border="1" style="border-collapse: collapse" id="tb1">
<tbody><tr>
    <th>インクリメントID</th>
    <th>ID</th>
    <th>名前</th>
    <th>性別</th>
    <th>スコア</th>
   
</tr>


<tr>
<td>1</td>
<td>1</td>
<td> ayana</td>
<td>0</td>
<td> 100点</td>

</tr>
<tr>
<td>2</td>
<td>2</td>
<td> rena</td>
<td>0</td>
<td> 50点</td>

</tr>
<tr>
<td>3</td>
<td>3</td>
<td> kana</td>
<td>0</td>
<td> 70点</td>

</tr>
<tr>
<td>4</td>
<td>4</td>
<td> 凪</td>
<td>0</td>
<td> 90点</td>

</tr>
<tr>
<td>5</td>
<td>1</td>
<td> 仁</td>
<td>0</td>
<td> 100点</td>

</tr>
</tbody></table>

<script src="input.js"></script>
</body>
</html>
```

```input.js
$(function() {
   
    $("tr td:nth-child(1)").addClass("Increments");

   
});
 

window.onload = function() {
    document.querySelector("td").addEventListener("dblclick", function() {
      var parent = this.parentNode;
      var td = this;
      var input = document.createElement("input");
      
      input.setAttribute("type", "text");
      input.value = td.innerText;
      
      // エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく
      // エンターキーが押された場合
      input.addEventListener("keydown", function(e) {
        if(e.keyCode === 13) {
          td.innerText = this.value;
          parent.replaceChild(td, this);
        }
      });
      
      // フォーカスが外れた場合
      input.addEventListener("blur", function() {
        td.innerText = this.value;
        parent.replaceChild(td, this);
      });
      
      parent.replaceChild(input, td);
      
      input.focus();
    });
  };
```

どうかよろしくお願いいたします。

tdをダブルクリックしたらinputタグにして編集できるようにしたい

ユーザーからの入力がなかった場合にはNULLを設定したいのですが、0になってしまいます。
"%s"あたりが怪しいとは思うのですが、どう実装すれば良いか悩んでいます。
現実装は以下に抜粋します。(実際は6カラムありますが、省略しています)
※DBでデータ型はINT、デフォルト値はNULLに設定しています。

```php
$sql = sprintf('INSERT INTO hogeTable SET hoge="%s"',
    mysqli_real_escape_string($db, $_POST['hoge'])
);
```
```html
<td>
    <select name="hoge">
        <option value="">-</option>
        <option value=1>1</option>
        <option value=2>2</option>
    </select>
</td>

```
「-」を選択して、echo print_r($_POST);で中身を確認すると、空文字が格納されていることが確認できたのですが、
SQL文を生成した際に0に変換されてしまっているようです。

以下のようにしても結果は同じでした。
```html
<td>
    <select name="hoge">
        <option value=NULL>-</option>
        <option value=1>1</option>
        <option value=2>2</option>
    </select>
</td>

```

取得した値が空文字だった場合、以下のようなSQL文を呼ぶよう分岐することで一応動作上は問題なくなったのですが、かなり強引なやり方なのが気に入りません。
```PHP
$sql = sprintf('INSERT INTO hogeTable SET hoge=NULL');
```
何か良い方法はありますでしょうか？

SQLでNULLではなく、0が格納されてしまう。

MySQLのデータベース内にある一つのテーブルを全て上書き(update)してしまいました。
バックアップは取っておりませんでした。

/var/lib/mysql/ディレクトリを見ると各テーブルのファイル(.MYD、.MYI.frm)が入っていました。
該当テーブルの.MYDファイルの中身をviで見てみると、
上書きする前のデータと上書きした後のデータが混在して書き込まれているようでした。

なんとかこの.MYDファイルから、上書きする前のデータを復元することはできないでしょうか。

よろしくお願いいたします。

上書きしてしまったMySQLデータの復元(.MYDファイル)

現在、社内で利用しているシステムがあります。
そのシステムのデータベースは、MySQL 5.6系を利用しています。

マスターデータを、更新される度に履歴を残していきたいと考えているのですが、
更新頻度が非常に多く、更新履歴をMongoDBへ格納しようと検討しております。

更新履歴として保存するデータは、更新前のデータ保存していく予定で考えております。
更新前データをMongoDBへ格納し、更新後のデータは、MySQLで管理し、
差分を調べたいときは、プログラム上で、判定を行いたいと考えております。

MongoDBの選定理由については、Json形式でデータを保持し、操作も容易にできそうなため選定しました。
MySQLでも、JSONの格納はできることは理解していますが、今回、NoSQLを試したいと思い試作として導入してみようと考えております。

ご教示頂きたいこととしまして、変更履歴について、皆様はどのようにデータを持たれているのか、
教えて頂きたく質問させて頂きました。

要件により履歴の内容も違うと思いますが、「どの箇所が変更されたかをあとから明確にすること」を
目的として、履歴を残していきたいと思っています。

NoSQLに、変更前、変更後を保持するのか、変更前を保持するのか、
色々な意見を頂けると幸いです。

ざっくりとした質問で申し訳ございませんが、よろしくお願いします。

データベース設計(変更履歴について)

データベースに１次元配列を保存したいのですが、うまくいきません。
動かないのですが、イメージとしてソースをアップ致しました。
初心者で申し訳ありませんが、よろしくお願い致します。
___
**備考**
・MariaDBを使用しています。
・配列をセットするときに適切なデータベースの「データ型」が分かりません(例えば、VARCHAR(30)のようなもの)
・PHPの変数「tdata」に１次元配列のデータが格納されています。
___

```PHP
try {
            $this->pdo->beginTransaction();
            
            
            //データベースのtestテーブルにtdata（１次元配列）を格納する
            $sql = "INSERT  INTO test (tdata)
            VALUES ( :tdata)";

            $stmh = $this->pdo->prepare($sql);
            $stmh->bindValue(':tdata',    tdata,    PDO::PARAM_STR ); //ここもPDO::PARAM_STRで大丈夫でしょうか・・
            $stmh->execute();
            $this->pdo->commit();
        } catch (PDOException $Exception) {
            $this->pdo->rollBack();
            print "エラー：" . $Exception->getMessage();
        }
```

データベースに配列を格納したいのですがうまくいきません。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
phpの練習でDB登録式の計算機を作っています。
チェックボックスの付いている項目だけ計算し、更新できるようにしたいです。

###発生している問題・エラーメッセージ
更新しても、テキストボックスに入れた数値が反映されず、DBの最初に登録した数値で表示されます。
エラーは発生しておらず、動作はしております。



```php
//更新・削除処理
if( isset( $_POST["selchk"])) {
	$chk = $_POST["selchk"];
	$max =count($chk);
	//print_r($chk);
	//更新
	if(isset($_POST["koushin"]) && $_POST["db_first"] && $_POST["db_second"] && $_POST["db_method"]){
		$result = mysql_query('SELECT * FROM calculation');
		for($i = 0; $i < $max; $i++){
			list($key, $first_fix) = each($_POST["db_first"]);
			list($key2,$second_fix) = each($_POST["db_second"]);
			list($key3,$method_fix) = each($_POST["db_method"]);

			$db_calnumber = keisan($method_fix,$first_fix,$second_fix);
			$answer_fix = gusukisu($db_calnumber,$first_fix, $second_fix);
			$odd_even_fix = odd_even($db_calnumber);

			$updated = date( "Y/m/d H:i:s", time());

			//更新処理
			$sql = "UPDATE calculation
					SET updated='".$updated."',first='".$first_fix."',second='".$second_fix."',answer='"；.$answer_fix."',method='".$method_fix."',odd_even='".$odd_even_fix."'
					WHERE id='".$chk[$i]."'";
			$result_flag = mysql_query($sql);
			$result = mysql_query('SELECT * FROM calculation');
		}
	}
	$result_flag = mysql_query($sql);
	if ($result_flag) {
		echo "更新しました";
	}else{
		print(mysql_error());
		//echo "更新に失敗しました<br />";
	}
```

```html
<table>
	<tr>
		<th><input type="checkbox" name="all" onClick="AllChecked(this);" /></th>
		<th>#</th>
		<th>式</th>
		<th>答え</th>
		<th>奇/偶</th>
		<th>登録日</th>
		<th>更新日</th>
	</tr>
	<tr>
<?php

//データベースのレコードカウントした結果の数
$recordcount = mysql_num_rows($result);

//取得したデータを順に表示
for($i=1; $i<= $recordcount; $i++) {
	//DBの値から文字列に置換
	$row = mysql_fetch_array($result);
	echo  "<tr>";
	echo  "<td><input type=checkbox name=selchk[] value=".$row["id"]."></td>";
	echo  "<td>".$i."</td>";
	echo  "<td><input type=input name=db_first[] value=".$row["first"]."><input size=1 type=input name=db_method[] value=".$row["method"]."><input type=input name=db_second[] value=".$row["second"]."></td>";
	echo  "<td>".$row["answer"]."</td>";
	echo  $row["odd_even"];
	echo  "<td>".$row["created"]."</td>";
	echo  "<td>".$row["updated"]."</td>";
	echo  "</tr>\n";
}

?>
</tr>
</table>
```

選択したチェックボックスのみ更新

### 実現したいこと
pointRewardRatioの値を表示と更新を両方できるようにしたいです。

### 発生している問題・分からないこと
表示させるにはshemaでpointRewardRatioのtypeをIntに設定しなければならず、
Int型のままでは更新することができません。
更新しようと思ったらnumber型に設定する必要があります。
ただ、numberに設定すると今度は初めて表示するときに表示されなくなってしまいます。




### 該当のソースコード

```JavaScript_1
export const schema = {
  models: {
    
    
    Shop: {
      name: 'Shop',
      fields: {
        id: {
          name: 'id',
          isArray: false,
          type: 'ID',
          isRequired: true,
          attributes: [],
        },
        no: {
          name: 'no',
          isArray: false,
          type: 'Int',
          isRequired: false,
          attributes: [],
        },
        name: {
          name: 'name',
          isArray: false,
          type: 'String',
          isRequired: false,
          attributes: [],
        },
        pointRewardRatio: {
          name: 'pointRewardRatio',
          isArray: false,
          type: 'Number',
          isRequired: false,
          attributes: [],
        },
        createdAt: {
          name: 'createdAt',
          isArray: false,
          type: 'AWSDateTime',
          isRequired: false,
          attributes: [],
          isReadOnly: true,
        },
        updatedAt: {
          name: 'updatedAt',
          isArray: false,
          type: 'AWSDateTime',
          isRequired: false,
          attributes: [],
          isReadOnly: true,
        },
      },
      syncable: true,
      pluralName: 'Shops',
      attributes: [
        {
          type: 'model',
          properties: {},
        },
        {
          type: 'key',
          properties: {
            name: 'byGroup',
            fields: ['groupID'],
          },
        },
        {
          type: 'auth',
          properties: {
            rules: [
              {
                allow: 'public',
                operations: ['create', 'update', 'delete', 'read'],
              },
            ],
          },
        },
      ],
    },
  },
};
```

```JavaScript_2
import { ModelInit, MutableModel } from '@aws-amplify/datastore';
// @ts-ignore
import {
  LazyLoading,
  LazyLoadingDisabled,
  AsyncItem,
  AsyncCollection,
} from '@aws-amplify/datastore';



type ShopMetaData = {
  readOnlyFields: 'createdAt' | 'updatedAt';
};

type EagerShop = {
  readonly id: string;
  readonly no?: number | null;
  readonly name?: string | null;
  readonly pointRewardRatio?: number | null;
  readonly createdAt?: string | null;
  readonly updatedAt?: string | null;
};

type LazyShop = {
  readonly id: string;
  readonly no?: number | null;
  readonly name?: string | null;
  readonly pointRewardRatio?: number | null;
  readonly createdAt?: string | null;
  readonly updatedAt?: string | null;
};

export declare type Shop = LazyLoading extends LazyLoadingDisabled
  ? EagerShop
  : LazyShop;

export declare const Shop: (new (
  init: ModelInit<Shop, ShopMetaData>
) => Shop) & {
  copyOf(
    source: Shop,
    mutator: (
      draft: MutableModel<Shop, ShopMetaData>
    ) => MutableModel<Shop, ShopMetaData> | void
  ): Shop;
};

};
```

```JavaScript_3
import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from 'react-query';
import { DataStore } from '@aws-amplify/datastore';
import { Shop } from '../../models';
import { Col, Row } from 'react-bootstrap';
import { useForm, Controller } from 'react-hook-form';
import { Error } from '../Error';
import { Loading } from '../Loading';
import { InputForm } from '../../components/InputForm';
import { AlertView } from '../../components/AlertView';
import { ButtonView } from '../../components/ButtonView';
import { FormSelect } from '../../components/FormSelect';
import { times } from '../../utils/Constants';
import { CheckBox } from '../../components/CheckBox';
import { Button } from '@mui/material';
import { searchAddress } from '../../utils/Commons';
import {
  addressFormat,
  nameFormat,
  postCodeFormat,
  telFormat,
  urlFormat,
} from '../../utils/Formatter';

export const ShopEdit = ({ id, action, saveSuccess }) => {
  const queryClient = useQueryClient();
  const [error, setError] = useState();
  const [limitForm, setLimitForm] = useState(false);

  const {
    data: shop,
    isLoading,
    isError,
  } = useQuery(['shopDetail', id], async () => await DataStore.query(Shop, id));

  const {
    register,
    formState: { errors },
    handleSubmit,
    control,
    watch,
    setValue,
    getValues,
  } = useForm({ mode: 'onChange' });


  useEffect(() => {
    shop && shop.useMembership == true
      ? setLimitForm(true)
      : setLimitForm(false);
  }, [shop]);

  const updateShop = async (data) => {
    await DataStore.save(
      Shop.copyOf(shop, (updated) => {
        console.log('Updating with:', updated);
        (updated.name = data.name),
          (updated.pointRewardRatio = data.pointRewardRatio);
      })
    );
  };

  const mutation = useMutation(
    (data) => {
      return updateShop(data);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('shop');
        queryClient.invalidateQueries('shopDetail');
        saveSuccess('保存しました');
      },
    }
  );

  const onSubmit = (data) => {
    setError('');
    mutation.mutate(data);
  };

  if (isLoading) return <Loading screen={'shops'} />;

  if (isError) return <Error />;

  return (
    <>
      <Row>
        
        <Col>
          
          {watch('useMembership') && (
            <>
              <InputForm
                field={'還元ポイント(%)'}
                label={'pointRewardRatio'}
                register={register}
                inputRef={register}
                defaultValue={shop.pointRewardRatio}
                className={'mb-3'}
              />
            </>
          )}
        </Col>
      </Row>
      <Row>
        <Col>
          {mutation.isError && (
            <AlertView type="error" message="保存に失敗しました" />
          )}
          {error && <AlertView type="error" message={error} />}

          <div className="d-grid gap-2 d-md-flex justify-content-md-end">
            <ButtonView
              title={'キャンセル'}
              className="button-back my-3 py-2"
              save={action}
            />
            <ButtonView
              loading={mutation.isLoading}
              title={'保存'}
              save={handleSubmit(onSubmit)}
              className="button-proceed my-3 py-2"
            />
          </div>
        </Col>
      </Row>
    </>
  );
};
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
JavaScript_1の
```javascript
pointRewardRatio: {
          name: 'pointRewardRatio',
          isArray: false,
          type: 'Number',
          isRequired: false,
          attributes: [],
        },
```
のtype: 'Number',をIntにしたりNumberに変更したりして表示と更新どちらかしか動かないことが解った。
一応Intにした場合、クエリでshop内にpointRewardRatioのデータを取得しているのは解っているけど、Numberにすると取得できなくなっています。

### 補足
特になし

JavaScript(node.js)で値の表示と更新が両立できなくて困っています

### 実現したいこと
以下URLのようにHTMLでチャットのデモページを作りたいと考えております。

https://widget.castcraft.app/widgets/cLibFYs0LbMjEoHhOmhy/chat-box/vHoByfbLqO69dMuBLmjV?demo=true

### 発生している問題・分からないこと
1秒ごとに<div class="chat-box”>内に<dynamic-chat-message>を読み込んでいるところまでは理解しているのですが、仕組みがわからず困っています。

元々記述しているdivをcssアニメーションで時間差表示するのではなく、
親divに子divを外部から読み込ませたい（可能であれば数パターン）です。

実現に必要な言語（Javascript・PHP）についても見当がつかず、
知恵をお貸しいただけますと幸いです。よろしくお願い致します。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
「Javascript 外部HTML 読み込み」等で検索しましたが、該当する結果は得られませんでした。

### 補足
特になし

HTMLで数秒ごとに要素を読み込み・表示する方法

###実現したい事
jsファイルを編集していましたが、重複する記述が複数のjsファイルでできたため一箇所に分けてそれを読み込むことにしたいと思いました。

jsファイルはHTMLに読み込ますことはよくやっているので分かるのですが、jsファイル内で他のjsファイルを読み込むにはどうすればいいでしょうか？

簡単なことだと思いますが、今までやったことがないため分からない状態です。
検索してもhtmlへjsファイルを読み込むという方法ばかり出るため質問させていただきました。

##追記

main.jsとinclude.jsがあるとします。
main.jsで、include.jsを読み込み、**include.jsにある変数を利用したいです。**

```javascript
document.write("<script type='text/javascript' src='include.js'></script>");
```

これで読み込む方法は分かったのですが、これだとinclude.jsにある変数を使えません。

どのように読み込めばmain.jsでinclude.jsの変数が利用できるでしょうか？


##具体的なコード

```javascript
//・・・・・・・・・・・include.js

var froala_setting = {
        language: 'ja',
        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
      };
   

//・・・・・・・・・・・main.js

//include.jsを読み込み

$('.content').froalaEditor(froala_setting);

//froala_setting変数をmain.jsで使いたいです。

```

やりたいことはこれだけです。

javascriptファイル内で外部javascriptを読み込む方法について

### 実現したいこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-01-19/462a5e9a-8732-4aab-8c79-4b142c75dcd2.png)

上記のようなコンテンツを作成しています。
.content_b は高さが固定で、スクロールによってその中の .content_b_text のみがスクロールされたいです。

画面スクロールによって、.content_b が表示されたら一度全体スクロールが止まり、この .content_b_text がスクロールされ、.content_b_text が一番下まで表示されたら全体スクロールに戻りたいです。


### 発生している問題・分からないこと
以下のようなHTMLとCSSで、図の赤いところ（子要素のみ）スクロールは実現できているのですが、やりたいことは「全体スクロールで子要素を動かしたい」です。

ユーザーはただ全体スクロールしているだけ状態（.content_b_text部分を選択してスクロールしなくても良い状態）で、.content_b_text の中身を全部見せたいのですが、どのようにすれば良いか途方に暮れています。

ロジックが思いつかないためJSも書けず、HTML, CSSの指定があっているのかも不明です。



### 該当のソースコード

```html
<div class="contents_b">
  <div class="content_b_wrapper">
    <div class="content_b_text">
      長い中身
      長い中身
      長い中身
      長い中身
      長い中身
      長い中身
    </div>
  </div>
</div>
```

```css
.content_b {
  background-color: #f00;
  height: 400px;
}

.content_b_wrapper {
  height: 400px;
  overflow: scroll;
  background-color: #fff;
  width: 50%;
  margin-left: 50%;
}

.content_b_text {
  // テキスト周りの設定
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
まず、同様の挙動を実現しているサイトがそもそも見つかりませんでした。。

### 補足
HTML / CSS / Javascript（jQuery）で実装しています。
おそらくこの3つの組み合わせで実現可能かとは思いますが、考え方のヒントなどいただけますと幸いです。

画面全体スクロールのみで子要素をスクロールさせたい

初質問失礼します。
### 実現したいこと


- [ ] グラフにアニメーションを付けたい

### 前提


chart.jsを使用してcsvファイルを読み込みグラフを表示するページを作成しているのですが、アニメーションが動作しなくなってしまいました。


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

グラフのアニメーションが表示されないです。
開発者ツールを使用して、エラーメッセージを確認したのですがコンソール上には何も表示されませんでした。

### 該当のソースコード

```HTML
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>結果の可視化</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<style>
		.originalFileBtn {
			border: 3px solid;
			display: inline-block;
			padding: 5px 1em;
			position: relative;
			color: #FFF;
			background: #fd9535;
			/*背景色*/
			border: solid 2px #fd9535;
			border-bottom: solid 2px #d27d00;
			/*少し濃い目の色に*/
			border-radius: 4px;
			/*角の丸み*/
			box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
			font-weight: bold;
		}

		.originalFileBtn input[type="file"] {
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.originalFileBtn:active {
			border-bottom: solid 2px #fd9535;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
		}

		body {
			background-color: #ffffff;
			color: #333333;
			font-family: Arial, sans-serif;
		}

		h2 {
			color: #ff5500;
		}


		.chart-row {
			border-bottom: 1px solid #f4f4f4;
			padding: 20px 0;
		}

		canvas {

			background-color: #ffffff;
		}

		.result-list {
			border: 1px solid #f4f4f4;
			background-color: #ffffff;
		}

		.result-list li {
			border-bottom: 1px solid #f4f4f4;
		}

		.result-list li:hover {
			background-color: #ff9500;
			color: #ffffff;
		}

		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			padding: 20px;
		}

		.chart-row {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			width: 100%;
		}

		canvas {
			width: 50%;
			max-height: 350px;
			max-width: 500px;
		}

		.result-list {
			list-style-type: none;
			padding: 0;
			width: 400px;
			background-color: #f9f9f9;
			border: 1px solid #ddd;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
		}

		.result-list li {
			padding: 10px;
			border-bottom: 1px solid #ddd;
		}

		.result-list li:last-child {
			border-bottom: none;
		}
	</style>
</head>

<body>
	<h2>テストの成果を確認できます</h2>

	<div class="originalFileBtn ">
		UPLOAD
		<input type="file" class="btn-square-pop" id="csv-file" accept=".csv" />
	</div>
	<p>ファイルが選択されていません</p>

	<div class="chart-row">
		<div id="chart1-container" >
			<h3 id="title1" style="display: none;">日別取り組み状況</h3>
			<canvas id="graph1" height="450" width="500"></canvas>
		</div>
		<div id="chart2-container" >
			<h3 id="title2" style="display: none;">各問題正答率</h3>
			<canvas id="graph2" height="450" width="500"></canvas>
		</div>
	</div>
	<div class="chart-row">
		<div id="chart3-container" >
			<h3 id="title3" style="display: none;">問題別平均回答時間</h3>
			<canvas id="graph3" height="450" width="500"></canvas>
		</div>
		<div id="chart4-container" >
			<h3 id="title4" style="display: none;">日別の正答率</h3>
			<canvas id="graph4" height="450" width="500"></canvas>
		</div>
	</div>
	<script>
		$('input').on('change', function () {

			var file = $(this).prop('files')[0];
			$('p').text("読み込みファイル: " + file.name);
		});
		// グローバル変数でチャートを保持します。
		var chart1, chart2, chart3, chart4;

		document.getElementById('csv-file').addEventListener('change', function (evt) {
			var file = evt.target.files[0];

			// ファイルが選択されていない場合、処理をスキップします。
			if (!file) {
				console.log("No file selected");
				return;
			}
			
			 document.getElementById('title1').style.display = 'block';
			 document.getElementById('title2').style.display = 'block';
			 document.getElementById('title3').style.display = 'block';
			 document.getElementById('title4').style.display = 'block';


			Papa.parse(file, {
				download: true,
				header: true,
				skipEmptyLines: true,
				complete: function (results) {
					var data = results.data;

					// 既存のチャートがあれば破棄します。
					if (chart1) chart1.destroy();
					if (chart2) chart2.destroy();
					if (chart3) chart3.destroy();
					if (chart4) chart4.destroy();
					

					// 日付ごとにデータを集計します。
					var dailyData = {};
					var dailyCorrect = {};
					data.forEach(function (row) {
						var date = row['回答日時'].split(' ')[0];
						if (!dailyData[date]) {
							dailyData[date] = 0;
							dailyCorrect[date] = 0;
						}
						dailyData[date]++;
						if (row['正解不正解'] == '正解') {
							dailyCorrect[date]++;
						}
					});

					// 日付の配列を作成し、ソートします。
					var dates = Object.keys(dailyData);
					dates.sort();

					// 最新の30日分の日付だけを取得します。
					var recentDates = dates.slice(Math.max(dates.length - 30, 0));

					// チャート1を作成します。
					var ctx1 = document.getElementById('graph1').getContext('2d');
					chart1 = new Chart(ctx1, {
						type: 'bar',
						data: {
							labels: recentDates,
							datasets: [{
								label: '取り組み問題数',
								data: recentDates.map(date => dailyData[date]),
								backgroundColor: 'steelblue'
							}]
						},
						options: {
														animation: {
            duration: 2000, // アニメーションの持続時間（ミリ秒）
            easing: 'easeInOutQuart', // アニメーションのイージング（変化の速さ）
        },
							scales: {
								x: {title: {display: true, text: '日付'}},
								y: {title: {display: true, text: '取り組み状況'}}
							}
						}
					});
					
					chart1.update('none');

//chart1以外は省略しています。


					// 正答率と平均回答時間ごとに問題をグループ化します。
					var accuracyGroups = {};
					var avgTimeGroups = {};
					accuracyData.forEach(function (q) {
						if (!accuracyGroups[q.accuracy.toFixed(3)]) {
							accuracyGroups[q.accuracy.toFixed(3)] = [];
						}
						accuracyGroups[q.accuracy.toFixed(3)].unshift(q);
					});
					avgTimeData.forEach(function (q) {
						if (!avgTimeGroups[q.avgTime.toFixed(3)]) {
							avgTimeGroups[q.avgTime.toFixed(3)] = [];
						}
						avgTimeGroups[q.avgTime.toFixed(3)].unshift(q);
					});

					// 各グループを正答率と平均回答時間でソートします。
					var sortedAccuracyGroups = Object.keys(accuracyGroups).sort((a, b) => b - a).map(function (accuracy) {
						return accuracyGroups[accuracy];
					});
					var sortedAvgTimeGroups = Object.keys(avgTimeGroups).sort((a, b) => b - a).map(function (avgTime) {
						return avgTimeGroups[avgTime];
					});

					// トップ3とワースト3を取得します。
					var top3AccuracyGroups = sortedAccuracyGroups.slice(0, 3);
					var bottom3AccuracyGroups = sortedAccuracyGroups.slice(-3).reverse();
					var top3AvgTimeGroups = sortedAvgTimeGroups.slice(0, 3);
					var bottom3AvgTimeGroups = sortedAvgTimeGroups.slice(-3).reverse();


					// 結果を表示する要素を初期化します。
					var existingDiv = document.getElementById('resultDiv');
					if (existingDiv) {
						existingDiv.remove();
					}

					// 結果をリスト形式で表示します。
					var resultDiv = document.createElement('div');
					resultDiv.id = 'resultDiv';

					// 各グループの問題を最大5つまで表示し、それ以上は'etc...'と表示します。
					function displayQuestions(group) {
						if (group.length > 5) {
							return group.slice(0, 5).map(q => q.question).join(', ') + ', etc...';
						} else {
							return group.map(q => q.question).join(', ');
						}
					}

					// 平均回答時間を分と秒の形式に変換する関数を定義します。
					function formatTime(seconds) {
						if (seconds < 60) {
							return seconds.toFixed(1) + "秒";
						} else {
							var minutes = Math.floor(seconds / 60);
							var remainingSeconds = seconds % 60;
							return minutes + "分" + remainingSeconds.toFixed(1) + "秒";
						}
					}

					
					resultDiv.innerHTML = `
<table>
    <tr>
        <td>
            <ul class="result-list">
                <li><strong>正答率がトップ3の問題:</strong><br>
                    ${top3AccuracyGroups.map((group, i) => `${i + 1}. 正答率: ${(group[0].accuracy * 100).toFixed(0)}%<br>${displayQuestions(group)}`).join('<br><br>')}
                </li>
                <li><strong>正答率がワースト3の問題:</strong><br>
                    ${bottom3AccuracyGroups.map((group, i) => `${i + 1}. 正答率: ${(group[0].accuracy * 100).toFixed(0)}%<br>${displayQuestions(group)}`).join('<br><br>')}
                </li>
            </ul>
        </td>
        <td>
            <ul class="result-list">
				<li><strong>回答時間がトップ3の問題:</strong><br>
                    ${bottom3AvgTimeGroups.map((group, i) => `${i + 1}. 平均回答時間: ${formatTime(group[0].avgTime)}<br>${displayQuestions(group)}`).join('<br><br>')}
                </li>
                <li><strong>回答時間がワースト3の問題:</strong><br>
                    ${top3AvgTimeGroups.map((group, i) => `${i + 1}. 平均回答時間: ${formatTime(group[0].avgTime)}<br>${displayQuestions(group)}`).join('<br><br>')}
                </li>
                
            </ul>
        </td>
    </tr>
</table>
`;
					document.body.appendChild(resultDiv);
				}
			});
		});


	</script>
</body>

</html>
```

### 試したこと

updateを使ってアニメーションを読み込もうとしてみた。
もともとdisplay:noneだったものを表示する形にしていたのでその記述を削除した。

### 補足情報（FW/ツールのバージョンなど）
Chart.jsは最新版のCDNが見つからなかったため前のバージョンを使用しています。


chart.jsを使用したグラフのアニメーションの付与

「Java言語で学ぶデザインパターン入門」を元にデザインパターンを学習していますが、
Iteratorパターンを使うべきケースが理解できません。

書籍内のサンプルでは本の集合を表すBookShelfクラスにて、下記2つのメソッドを定義しています。
 ・本の冊数を返す。 int getLength ( )
 ・index番目の本を返す。 Book getBookAt ( int index )

MainクラスにてIteratorパターンを用いて、下記のように走査してますが、
```lang-java
Iterator it = book_shelf.iterator();
		while(it.hasNext()) {
			Book book = (Book)it.next();
			System.out.println(book.getName());
		}
```
Iteratorパターンを用いずに下記のようなfor文で問題ないと考えてます。

```lang-java
		for (int i = 0; i < bookShelf.getLength(); i++) {
			Book book = bookShelf.getBook(i);
			System.out.println(book.getName());
		}
```
Iteratorパターンのメリットは
> BookShelfクラスの実装を、現状の配列ではなく、Vectorを使うようにしても、BookShelfクラスを利用する側は変更しなくて済む。
と説明されてますが、これは「int getLength()」メソッドと「Book getBookAt()」が同じように機能するのであれば、forループの場合と比べて何ら変わりありません。

上記を踏まえた上で、Iteratorパターンのメリット、使うべきケースについてご教示頂けますと幸いです。

# なお、似たような記事を見つけましたが、こちらの内容ではいまいち理解できませんでした。
# http://www.aerith.net/design/Iterator-j.html

下記、参考までにソースを記載致します。

Aggregate.java
```lang-java
public interface Aggregate {

	public abstract Iterator iterator();
}
```
Iterator.java
```lang-java
public interface Iterator {
	public abstract boolean hasNext();
	public abstract Object next();
}
```
BookShelf.java
```lang-java
import java.util.*;

public class BookShelf implements Aggregate {

	private List<Book> books = new ArrayList<Book>();
	public Book getBook(int index) {
		return books.get(index);
	}
	public void appendBook(Book book) {
		books.add(book);
	}
	public int getLength() {
		return books.size();
	}
	public Iterator iterator() {
		return new BookShelfIterator(this);
	}
}
```
BookShelfIterator .java
```lang-java
public class BookShelfIterator implements Iterator {

	private BookShelf bookShelf;
	private int index;

	public BookShelfIterator(BookShelf bookShelf) {
		this.bookShelf = bookShelf;
		this.index = 0;
	}

	public boolean hasNext() {
		if (index < bookShelf.getLength()) {
			return true;
		} else {
			return false;
		}
	}

	public Object next() {
		Book book = bookShelf.getBook(index);
		index++;
		return book;
	}
}
```
Main.java
```lang-＜ここに言語を入力＞
public class Main {

	public static void main(String[] args) {

		BookShelf bookShelf = new BookShelf();
		bookShelf.appendBook(new Book("Around the World in 80 Days"));
		bookShelf.appendBook(new Book("Bible"));
		bookShelf.appendBook(new Book("Cinderella"));
		bookShelf.appendBook(new Book("Daddy-Long-Legs"));

		Iterator it = bookShelf.iterator();

		while(it.hasNext()) {
			Book book = (Book)it.next();
			System.out.println(book.getName());
		}

		//for (int i = 0; i < bookShelf.getLength(); i++) {
		//	Book book = bookShelf.getBook(i);
		//	System.out.println(book.getName());
		//}
	}
}
```

【デザインパターン】Iteratorパターンを使うべきケースが理解できません。

### 実現したいこと
スマホ表示の際に
 ローディング画像更新（２回目）時にローディング画像を消したい。

### 前提

ページ読み込み時にバックグラウンド、画像を順に表示して”ふわっと”消すアニメーションを作りたい。

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


javascriptを使ってスマホ（i-phon クローム　サファリ）でサイト訪問時にバックグラウンド画像、ロゴを順に表示してフェードアウトさせているのですが、初めてサイトに入った時にはうまくフェードアウトするのですが更新、２回目以降にサイトに入るとローディングバックグラウンド画像が消えない状態になってしまいます（ロゴも表示されない）。
macbook windowsのPCでは更新する度にアニメーションは上手く実行されます。
なぜかスマホの時だけ上手くいかないです。
何卒よろしくお願いいたします。


### 該当のソースコード

```ここに言語名を入力
【HTML】
<div class="loader">
        <div class="loader__logo">
          <img src="./assets/img/loader-logo.png" alt="Daily Flowerロゴ" />
       </div>
 </div>

【CSS】
.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url(../../../../../assets/img/loader-bg.png) no-repeat
    center/cover;
  z-index: 110;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.6);
    top: 0;
    left: 0;
    z-index: 120;
  }
}

.loader__logo {
  content: "";
  display: block;
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 130;
  display: none;

  img {
    width: 100%;
    height: 100%;
  }

【javascript】
// 最初のTOP画像バックグラウンドからロゴが浮き出て３秒後に消える
$(function () {
  function end_loader() {
    $(".loader").fadeOut(4000); /*フェードアウト４秒に変更*/
  }
  function show_logo() {
    $(".loader .loader__logo").fadeIn(600);
  }
  function hide_logo() {
    $(".loader .loader__logo").fadeOut(600);
  }
  $(window).on("load", function () {
    setTimeout(function () {
      show_logo();
    }, 1000);
    setTimeout(function () {
      end_loader();
    }, 4000); /*画像表示時間３秒から4秒に変更*/
  });
});
```



ローディング再度更新時にローディング画像が消えない(スマホ表示)

オブジェクト指向（OOP）は変更に強い、と一般に言われます。
カプセル化とかいろいろな機能のおかげで、あとから仕様変更する場合などに他に影響が及びにくい、と。

しかし実際には銀行や官公庁の大規模プロジェクトで、システム開発の失敗や遅延、頓挫などをしばしば見聞きします。
それらはおそらくJavaでOOPで開発されているはずです。
失敗や遅延などする理由は、発注元の曖昧な要求や後出しの仕様変更の多発などが想像されます。

でもOOPであれば、少なくとも仕様変更には強いはず。
なのに、なぜ失敗しまくるのでしょうか？
なぜ仕様変更のたびに膨大な影響範囲の調査・テストが必要なのか？ ある一部分の機能を変更するだけなら、そのクラスの単体テストだけでいいんじゃないの？

「OOPは設計が大事。最初の設計がダメだった」という意見が想定されます。
しかし数百億円・数千億円規模のプロジェクトに関わるレベルの人ですら上手な設計が出来ないのであれば、じゃあ一体誰なら上手に出来るのでしょうか？
そう考えるとOOPって机上の空論というか、現実的に「仕様変更に強い」という夢のようなことは期待できないのではないでしょうか？

あと、もしOOPが理論どおりに機能する概念だとしても、開発に延べ何千人も関われば結局グズグズになっていくのではないでしょうか？ 少数精鋭でやったほうが速く安く正確に開発できるのでは？ そもそもなぜ延べ数千人・数万人もの開発者が必要なのか？ 規模がデカいだけで、機能個々のプログラムの内容自体はそんなに難しいものではないでしょう？
初心者に毛が生えたようなSEやプログラマ数千人かき集めるよりも、スーパーハカークラスを超高給で数十人雇ったほうがいいのでは？


質問を整理します。
0. オブジェクト指向は本当に変更に強いのか？
0. なぜOOP開発での失敗例が多発するのか？
0. 失敗例の教訓、改善法はあるのか？
0. なぜ少数精鋭チームで開発しないのか？


その他OOP開発や大規模プロジェクトの失敗等について思うところあればなんでもご意見ください。