javascriptでresetしようとするとUncaught ReferenceError
Q&A
Closed
画面上部で検索条件を設定して、画面下部で一覧表示する画面を作っています。
クリアをクリックしたら、検索条件を全てクリアするべくjavascriptを記述してみましたが、
Uncaught ReferenceError: del is not defined at HTMLButtonElement.onclick
とエラーが出ます。
調査したところ、原因はタイプミスか、html側のbuttonタグ内でID名等と同じfunction名称を利用すると、このエラーになることがあるとの事で、後者に該当したので修正しましたが、同様にエラーになりました。
エラー原因の究明にご協力いただければ幸いです。
ソースコードを添付します。
<追記>
javascript内にoptionを初期化するための記述がありますが、こちらは問題なく動いてます。
<?php
try{
require_once("db_connect.php");
$pdo = new PDO("mysql:host=$SERV;dbname=$DB;charset=$CHAR",$USER,$PASS);
}
catch(PDOException $e){echo "次がエラーの内容です。;" .$e->getMessage();
}
$sdate = $_POST['sdate'] ?? "";
$edate = $_POST['edate'] ?? "";
$title = $_POST['title'] ?? "";
$content = $_POST['content'] ?? "";
$status = $_POST['status'] ?? "";
$clear = $_POST['clear'] ?? "";
?>
<!doctype html>
<html lang=ja>
<head>
<meta charset="utf-8">
<title>News一覧</title>
<meta name="description" content="Salon Yuri-rinの管理者ページ">
<!--リセットcss-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!--css-->
<link rel="stylesheet" href="css/news_style.css">
<!--レスポンシブ対応-->
<meta name="viwport" content="width=device-width, initial-scale=1">
<!--Googleフォント-->
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<h1>News一覧</h1>
<table class="search_table">
<form class="conditions" id="conditions" action="news_table.php" method="post">
<tr id="date" class="date">
<td><label for="sdate">日付</label></td>
<td><input type="date" name="sdate" id="sdate" value="<?=$sdate?>"></td>
<td><label for="edate">～</label></td>
<td><input type="date" name="edate" id="edate" value="<?=$edate?>"></td>
</tr>
<tr>
<td><label for="title">タイトル</label></td>
<td><input type="text" name="title" id="title" value="<?=$title?>"></td>
<td><label for="content">内容</label></td>
<td><input type="text" name="content" id="content" value="<?=$content?>"></td>
</tr>
<tr>
<td><label for="status">ステータス</label></td>
<td>
<select name="status" id="status">
<option value="0"
<?php if($status === '0')
{echo 'selected';}
else if($status === '1')
{echo '';}
else {echo '';}
?>
>未選択</option>
<option value="1"
<?php if($status === '1')
{echo 'selected';}
else if($status === '0')
{echo '';}
else {echo '';}
?>
>未公開</option>
<option value="2"
<?php if($status === '2')
{echo 'selected';}
else if($status === '0')
{echo '';}
else {echo '';}
?>
>公開</option>
</select>
</td>
</form>
</table>
<button type="button" form="conditions" class="search_button" id="clear" name="clear" onclick="del()">クリア</button>
<button type="submit" form="conditions" name="search_button" class="search_button" id='search_button'>検索</button>
<table class="tablehead">
<tr>
<th class="header">日付</th>
<th class="header">タイトル</th>
<th class="header">内容</th>
<th class="header">公開ステータス</th>
<th class="header2">
<form class="create" action="news_create.php">
<button type="submit" name="button" value="登録" class="button_a">登録</button>
</form>
</th>
<th class="header2"></th>
</tr>
</table>
<?php
//if(isset($_POST['sdate']) && isset($_POST['edate']) && isset($_POST['title']) && isset($_POST['content']) && isset($_POST['status']) && isset($row) &&
if(isset($_POST['search_button'])){
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$sql =
('select * from news
where
(pub_date >= ? and pub_date <= ?)
and title like ?
and content like ?
and status = ?'
);
$stmt = $pdo->prepare($sql);
$stmt ->execute(
[htmlspecialchars(date_format(date_create($_POST['sdate']),'Y-m-d'), ENT_QUOTES | ENT_HTML5, 'UTF-8'),
htmlspecialchars(date_format(date_create($_POST['edate']),'Y-m-d'), ENT_QUOTES | ENT_HTML5, 'UTF-8'),
htmlspecialchars($_POST['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),
htmlspecialchars($_POST['content'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),
htmlspecialchars($_POST['status'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),]);
$stmt->bindvalue(":title", "%" . $_POST['title'] . "%", PDO::PARAM_STR);
$stmt->bindvalue(":content", "%" . $_POST['content'] . "%", PDO::PARAM_STR);
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);}?>
<?php foreach($row as $data):?>
<form action="?" method="post" class = "newstblform">
<div class = "table1">
<table class="newstable">
<tr>
<label>
<input type="hidden" name="seq" value="<?=htmlspecialchars($data['id'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="seq">
</label>
<td class="dt">
<label>
<input type="text" name="pub_date" value="<?=htmlspecialchars($data['pub_date'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei" readonly="readonly">
</label>
</td>
<td class="dt">
<label>
<input type="text" name="title" value="<?=htmlspecialchars($data['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id=mei readonly="readonly">
</label>
</td>
<td class="dt">
<label>
<input type="text" name="content" value="<?=htmlspecialchars($data['content'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei_kana">
</label>
</td>
<td class="dt">
<label>
<input type="text" name="status" value="<?=htmlspecialchars($data['status'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei_kana">
</label>
</td>
<td class="bt">
<input type="submit" name=button value="修正" formaction="news_update.php" class="button_a">
</td>
<td class="bt">
<input type="submit" name=button value="削除" formaction="news_delete_conf.php" class="button_a">
</td>
</tr>
</table>
</div>
</form>
<?php endforeach; ?>
<?php //require_once('newslist_chk_js.php'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('clear').addEventListener('click', function(){
var select = document.getElementById('status');
select.selectedIndex = 0;
function del() {
document.conditions.reset();
}
}),false;
}),false;
</script>
<noscript>
javascriptが実行できません。
</noscript>
</body>
</html>
0 likes
