その-1
https://html-suisui.com/Sample_Coding_A/Sample_Coding_053/Sample_Coding_053.html
<p style="font-size:10px;color:#456789;text-align:center;margin:20px;"> https://html-suisui.com/Sample_Coding_A/Sample_Coding_053/Sample_Coding_053.html </p>
その-2
Counter: 0
<style>.ボタン{padding: 2px 4px;font-size: 10px;cursor: pointer;border: none;background-color: #ffffff;color: #456789;border: solid 1px #456789;border-radius: 5px;margin:10px;}</style><div style="text-align:center"><button onclick="いいね()" id="ぼたん_いいね" class="ボタン">いいね</button><button onclick="取り消し()" id="ぼたん_取り消し" class="ボタン" disabled="">取り消し</button><div id="イイネ表示"></div><p id="カウント表示">Counter: 0</p></div>
<script>window.onload = function() {if(document.cookie.indexOf("liked=true") !== -1){document.getElementById("イイネ表示").innerHTML = '<p style="color:#00abcd;font-size:30px;">イイネ！</p>';document.getElementById("ぼたん_いいね").disabled = true;document.getElementById("ぼたん_取り消し").disabled = false;}else{document.getElementById("ぼたん_いいね").disabled = false;document.getElementById("ぼたん_取り消し").disabled = true;}更新カウント();};function 更新カウント(){let りくえすと = new XMLHttpRequest();りくえすと.open("GET", "button_like_4.php", true);りくえすと.onreadystatechange = function(){if(りくえすと.readyState === 4 && りくえすと.status === 200){document.getElementById("カウント表示").innerHTML = "Counter: " + りくえすと.responseText;}};りくえすと.send();}function いいね(){if(document.cookie.indexOf("liked=true") === -1){let りくえすと = new XMLHttpRequest();りくえすと.open("POST", "button_like_4.php", true);りくえすと.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");りくえすと.onreadystatechange = function(){if(りくえすと.readyState === 4 && りくえすと.status === 200) {document.getElementById("カウント表示").innerHTML = "Counter: " + りくえすと.responseText;document.getElementById("イイネ表示").innerHTML = '<p style="color:#00abcd;font-size:30px;">イイネ！</p>';document.getElementById("ぼたん_いいね").disabled = true;document.getElementById("ぼたん_取り消し").disabled = false;document.cookie = "liked=true; path=/; max-age=86400";}};りくえすと.send("action=like");}}function 取り消し(){if(document.cookie.indexOf("liked=true") !== -1){let りくえすと = new XMLHttpRequest();りくえすと.open("POST", "button_like_4.php", true);りくえすと.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");りくえすと.onreadystatechange = function(){if(りくえすと.readyState === 4 && りくえすと.status === 200){document.getElementById("カウント表示").innerHTML = "現在のクリック数: " + りくえすと.responseText;document.getElementById("イイネ表示").innerHTML = "";document.getElementById("ぼたん_いいね").disabled = false;document.getElementById("ぼたん_取り消し").disabled = true;document.cookie = "liked=; path=/; max-age=0";}};りくえすと.send("action=cancel");}}</script>
その-3
<input type="button" value="いいね" onclick="ぼたん()"><div id="目印"></div><script>function ぼたん(){let それは=new XMLHttpRequest();それは.open("POST","https://css000.stars.ne.jp/momo/test_wp_XX/button_like_0.php",true);それは.setRequestHeader("Content-Type","application/x-www-form-urlencoded");それは.onreadystatechange=function(){if(それは.readyState===4 && それは.status===200){document.getElementById("目印").innerHTML=それは.responseText;}};それは.send();}</script>
その-4 (現代音楽) → その-3と同じ
<input type="button" value="いいね" onclick="ぼたん()"><div id="目印"></div><script>function ぼたん(){let それは=new XMLHttpRequest();それは.open("POST","https://css000.stars.ne.jp/momo/test_wp_XX/button_like_0.php",true);それは.setRequestHeader("Content-Type","application/x-www-form-urlencoded");それは.onreadystatechange=function(){if(それは.readyState===4 && それは.status===200){document.getElementById("目印").innerHTML=それは.responseText;}};それは.send();}</script>
