\u00a0 <title>My Playground<\/title><\/div>
\u00a0 <link rel=”stylesheet” href=”https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.9.0\/font\/bootstrap-icons.css”><\/div>
\u00a0 <style><\/div>
\u00a0 \u00a0 body {<\/div>
\u00a0 \u00a0 \u00a0 user-select: none;<\/div>
\u00a0 \u00a0 }<\/div>
\u00a0 \u00a0 i {<\/div>
\u00a0 \u00a0 \u00a0 color: red;<\/div>
\u00a0 \u00a0 \u00a0 font-size: 20px;<\/div>
\u00a0 \u00a0 \u00a0 margin-right: 4px;<\/div>
\u00a0 \u00a0 \u00a0 cursor: pointer;<\/div>
\u00a0 \u00a0 }<\/div>
\u00a0 \u00a0 i.large {<\/div>
\u00a0 \u00a0 \u00a0 font-size: 32px;<\/div>
\u00a0 \u00a0 }<\/div>
\u00a0 \u00a0 span {<\/div>
\u00a0 \u00a0 \u00a0 font-size: 20px;<\/div>
\u00a0 \u00a0 \u00a0 color: #aaa;<\/div>
\u00a0 \u00a0 }<\/div>
\u00a0 <\/style><\/div>
<\/head><\/div>
<body><\/div>
\u00a0 <i class=”bi bi-heart-fill” id=”heart”><\/i><\/div>
\u00a0 <span id=”counter”>0<\/span><\/div>
\u00a0 <script><\/div>
\u00a0 \u00a0 \/\/ \u30af\u30ea\u30c3\u30af\u56de\u6570\u30920\u3067\u521d\u671f\u5316<\/div>
\u00a0 \u00a0 let n = 0;<\/div>
\u00a0 \u00a0 \/\/ \u30cf\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3\u306e\u8981\u7d20\u3092\u53d6\u5f97<\/div>
\u00a0 \u00a0 const heart = document.getElementById(‘heart’);<\/div>
\u00a0 \u00a0 \/\/ \u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u8981\u7d20\u3092\u53d6\u5f97<\/div>
\u00a0 \u00a0 const counter = document.getElementById(‘counter’);<\/div>
\u00a0 \u00a0\u00a0<\/div>
\u00a0 \u00a0 \/\/ \u30cf\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u51e6\u7406<\/div>
\u00a0 \u00a0 heart.addEventListener(‘click’, () => {<\/div>
\u00a0 \u00a0 \u00a0 \/\/ \u30ab\u30a6\u30f3\u30bf\u30fc\u30921\u5897\u3084\u3059<\/div>
\u00a0 \u00a0 \u00a0 n++;<\/div>
\u00a0 \u00a0 \u00a0 \/\/ \u30ab\u30a6\u30f3\u30bf\u30fc\u304c10\u3092\u8d85\u3048\u305f\u5834\u5408\u3001\u30cf\u30fc\u30c8\u3092\u5927\u304d\u304f\u3059\u308b<\/div>
\u00a0 \u00a0 \u00a0 if (n > 10) {<\/div>
\u00a0 \u00a0 \u00a0 \u00a0 heart.classList.add(‘large’);<\/div>
\u00a0 \u00a0 \u00a0 }<\/div>
\u00a0 \u00a0 \u00a0 \/\/ \u30af\u30ea\u30c3\u30af\u56de\u6570\u3092\u8868\u793a<\/div>
\u00a0 \u00a0 \u00a0 counter.textContent = n;<\/div>
\u00a0 \u00a0 });<\/div>
\u00a0 <\/script><\/div>
<\/body><\/div><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html lang=”ja”> <head> \u00a0 <meta charset=”utf-8″> \u00a0 <tit … “Javascript \u30cf\u30fc\u30c8\u3092\u30af\u30ea\u30c3\u30af” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[78,4,1],"tags":[41],"class_list":["post-16358","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","category-uncategorized","tag-javascript"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/16358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16358"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/16358\/revisions"}],"predecessor-version":[{"id":16359,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/16358\/revisions\/16359"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16358"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}