クリックする度にテキストを変化させる方法【鬼滅の刃好き過ぎる！】

鬼滅の刃にどハマり中です！

とゆうことで。

クリックする度にテキストを変化させる方法になります。

<style>
body {
  font-size: 100%;
  font-family: 'Hiragino Maru Gothic ProN';
  background-color: #f5f5f5;
}

a {
color: #6a5acd;
font-weight: 900;
text-decoration:none;
}
#top {
width: 85%;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border-radius: 10px;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}
button {
font-size:30px;
margin:20px;
padding:20px;
}
#fmbox {
position:relative;
top:340px;
}
<? //以下、条件でカラー反転
if($_POST['kimetu'] == "4"){
?>
body {
color:#fff;
}
#top {
background-color:#000;
}
<? } ?>
</style>
</head>
<body>
<div id="top">
<?
if($_POST['kimetu'] == "4"){
$kimeText = "鬼　滅　の　刃";
}
?>
<center><h3>■■■ <? echo $kimeText; ?> ■■■</h3></center>
<hr>
<?
echo "<center>";

echo "<div id='fmbox'>";

if(empty($_POST['kimetu']) || $_POST['kimetu'] == "4"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='1'>👹</button></form>";
}

if($_POST['kimetu'] == "1"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='2'>👹</button></form>";
}

if($_POST['kimetu'] == "2"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='3'>👹</button></form>";
}

if($_POST['kimetu'] == "3"){
echo "<form method='post' action='index.php'><button type='submit' name='kimetu' value='4'>👹</button></form>";
}

echo "</div>";

$kimetu = $_POST['kimetu'];
switch($kimetu){
case $kimetu == "0":
$kimeText = "";
break; 
case $kimetu == "1":
$kimeText = "鬼";
break; 
case $kimetu == "2":
$kimeText = "鬼　滅";
break; 
case $kimetu == "3":
$kimeText = "鬼　滅　の";
break; 
case $kimetu == "4":
$kimeText = "鬼　滅　の　刃";
break; 
}

echo "<p style='font-size:40px;'>{$kimeText}</p>";

if($_POST['kimetu'] == "4"){
echo "<a href='index.php'><button>リセット</button></a>";
}

echo "</center>";
?>
</div>
</body>

今回はスタイルも含めてます。

最後にカラー反転をさせているので、主にその部分になります。

クリックする度にテキストを変化させる方法【鬼滅の刃好き過ぎる！】