昨日まで正常に動いたコードが今朝動かなくなってしまいました。
selectで選択するとボタンの値が変更され、間にconsole.logなどを入れるとそれも表示されるのでJavascript自体は正常に動いています。
しかしjsファイルの一番最後の行のclickイベントだけが動きません。
clickイベントの中にconsole.logを入れても何も表示されないため、clickイベントが動いていないことだけは確かです。
昨日動いた時はをformの中に入れていた時は動いたのですが、数時間後にボタンをクリックしたところ$("#sm").html("決定");と同じ動きをしたためformの外に出しましがそれでもダメでした。
どうすればよろしいでしょうか?
皆様の知恵をお借りしたいです。
$("#sm").html("決定");
→クリックすると別ページに飛ぶ
クリックイベント
→クリックするとchange_taglineを呼び出し、ボタンのテキストをtaglines配列の中からランダムに選んで変更する
fortune.ejs
<html>
<head>
<meta charset="utf8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="siren.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>SIREN占い</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div id="contents">
<h3>SIREN占いのページです。</h3>
<p>シリーズを選択してください</p>
<form action="/result" method="POST" id="form">
<select id="select_series" name="selected_series">
<option value="none" name="series">--選択してください--</option>
<option value="one" name="series">SIREN</option>
<option value="two" name="series">SIREN2</option>
<option value="nt" name="series">SIREN:NT</option>
<option value="all" name="series">全シリーズ</option>
</select>
<p><input type="number" min="1" max="5" value="1" name="times" id="number">回占う</p>
<div id="sm"></div>
</form>
<div id="tagline"></div>
<a href="/top">TOPに戻る</a>
</div>
</body>
</html>
siren.js
$(function(){
const taglines = ["どうあがいても、絶望", "逃げ場なんて、ないよ", "息をすることさえ、恐怖"];
//selectが変化した場合、ボタンの文字も変える
$("#select_series").change(function(){
let select = $("#select_series").val();
switch(select){
case "one":
$("#sm").html("<button type='submit' id='select'>決定</button>");
$("#select").text("全部…消してやる!");
$("#tagline").html("");
break;
case "two":
$("#sm").html("<button type='submit' id='select'>決定</button>");
$("#select").text("神風見せてやるよ!");
$("#tagline").html("");
break;
case "nt":
$("#sm").html("<button type='submit' id='select'>決定</button>");
$("#select").text("Go To Hell!");
$("#tagline").html("");
break;
case "all":
$("#sm").html("<button type='submit' id='select'>決定</button>");
change_tagline();
$("#tagline").html("<button id='change'>変更</button>");
break;
default:
$("#sm").html("");
$("#tagline").html("");
}
});
//全シリーズ選択時に、ランダムにボタンの文字をキャッチコピーに変換
function change_tagline(){
$("#select").text(taglines[Math.floor(Math.random() * taglines.length)]);
}
$("#change").click(function(){
change_tagline();
});
});