いいねボタンを Javascript でカウントしたいのですが数字が表示されません

Question

実現したいこと

SVG画像のいいねボタンがクリックされた数をカウントしてその数を表示させたい。

発生している問題・分からないこと

SVG画像の右側に数字が表示されません。

該当のソースコード

<?php
/*
Template Name: bbs_lile_count
固定ページ: いいねボタン
*/
?>
<style>
    .quest-likeButton svg {
        vertical-align: text-bottom;
    }

    .quest-likeButton {
        height: 100px;
        width: 100px;
    }
</style>

<button type="button" class="quest-likeButton">
    <svg version="1.1" class="likeButton-icon" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
        <style type="text/css">
            .st0 {
                fill: #FFFFFF;
                stroke: #000000;
                stroke-width: 8.7931;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
        </style>
        <path class="st0" d="M101.5,175.5c3.9,5.9,16.6,9.3,16.6,9.3h58.6c13.2-4.4,5.9-17.1,5.9-17.1s7.8-1,11.2-9.3
	c3.4-8.3-3.4-12.7-3.4-12.7s10.3-1.5,10.3-11.2c0-12.2-11.7-10.3-11.7-10.3s10.7,1,10.7-11.7s-11.2-10.7-11.2-10.7h-40.1
	c0,0,2.9-8.3,3.4-14.7c0.5-6.4,2.9-18.6-7.8-28.8s-17.1-4.4-17.1-4.4v22.5c0,0,0.1,5.1-3.4,10.1l-15.3,29.7l-6.7,4.6" />
        <path class="st0" d="M101.5,120.8v59.6c0,0,0.5,7.3-4.9,7.3H65.4c0,0-6.4-0.5-6.4-4.9v-60.1c0,0,0.5-8.3,4.9-8.3h30.8
	C94.7,114.4,101.5,113.4,101.5,120.8z" />
    </svg>
</button>
<span class="likeCount"></span>

<script>
    document.addEventListener('DOMContentLoaded', function() { // キーが押された瞬間に一度だけ発生
        //function countClickbutton() {
        // カウント用の変数
        let count = 0;
        // いいねボタンの要素を取得
        const likeButtonIcon = document.querySelector(".likeButton-icon");
        // 取得したいいねボタンがクリックされた時、カウントを1つ増やして再代入する
        likeButtonIcon.addEventListener("click", function() {
            count++;
            // ボタンが押された時にいいねされた状態の見た目に変更する
            likeButtonIcon.classList.toggle('liked');
            // いいねカウント表示
            likeCountElement.textContent = count;
        })
        // }
    }, false);
</script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

SVG画像を指定してカウントしたのが原因ではないかと考え、ボタンに変更してみたのですが表示されませんでした。
likeButtonIcon.addEventListener("click", function() {
↓
questLikeButton.addEventListener("click", function() {

補足

※ 参考サイト
https://note.com/gigun/n/na94d297bc670

Comments

[yambejp]

状況がわかりません。
サーバー側でいいねの数がカウントアップされる仕組みがあるならAPIで更新して取りに行く必要があります。
自分が複数回おせて、その数をカウントアップするだけならそういう仕組でもいいですが、いいねの趣旨とは違うような気がします

[pecmm]

何かエラーメッセージは出ていますか？

画面上で異常が見当たらなくても、開発者ツールのコンソール等に表示されている可能性があります

[homepage-site]

yambejpさん回答ありがとうございます、Q＆A掲示板での質問に関するいいね機能になるため、データベースで質問と結びつける必要があることに後々気が付いたのですが、Javascript で作成していたので勉強のために一度カウントアップする機能を作り上げたいと思っております。

[homepage-site]

pecmmさん回答ありがとうございます。
Uncaught ReferenceError: likeCountElement is not defined at HTMLButtonElement.<anonymous> というエラーが表示されており、関数名が未定義でした確認不足で申し訳ありません。
エラーを修正したのですが、いいね画像をクリックした際に別のエラーが発生していて原因が分かりません。
アドバイスお願い致します。

※ エラー文
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at SVGSVGElement.<anonymous> (いいねボタンテスト/:49:42)

※ 該当コード

※ 42行目
likeButtonIcon.addEventListener("click", function() {

※ 49行目
likeCountElement.textContent = count;

[Lhankor_Mhy]

likeCountElement には何が入っていますか？　定義している部分のスクリプトを提示してください。

[Lhankor_Mhy]

参考にされた記事を読んだのですが、
const likeCountElement = document.getElementById("likeCount")
という行があり、homepage-site さんのコードからは削除されているようでした。

単純なコピペミスを疑っています。

[homepage-site]

Lhankor_Mhyさん回答ありがとうございます。
ご指摘頂いた通りコードが不足していたことに気が付き修正しているのですが、エラーが発生しております。

Answer 1

とりあえずsvg内の数値をインクリメントしたいだけならこれでいけます

<style>
    .quest-likeButton svg {
        vertical-align: text-bottom;
    }

    .quest-likeButton {
        height: 100px;
        width: 100px;
    }
</style>

<button type="button" class="quest-likeButton">
    <svg version="1.1" class="likeButton-icon" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
        <style type="text/css">
            .st0 {
                fill: #FFFFFF;
                stroke: #000000;
                stroke-width: 8.7931;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
        </style>
        <path class="st0" d="M101.5,175.5c3.9,5.9,16.6,9.3,16.6,9.3h58.6c13.2-4.4,5.9-17.1,5.9-17.1s7.8-1,11.2-9.3
	c3.4-8.3-3.4-12.7-3.4-12.7s10.3-1.5,10.3-11.2c0-12.2-11.7-10.3-11.7-10.3s10.7,1,10.7-11.7s-11.2-10.7-11.2-10.7h-40.1
	c0,0,2.9-8.3,3.4-14.7c0.5-6.4,2.9-18.6-7.8-28.8s-17.1-4.4-17.1-4.4v22.5c0,0,0.1,5.1-3.4,10.1l-15.3,29.7l-6.7,4.6" />
        <path class="st0" d="M101.5,120.8v59.6c0,0,0.5,7.3-4.9,7.3H65.4c0,0-6.4-0.5-6.4-4.9v-60.1c0,0,0.5-8.3,4.9-8.3h30.8
	C94.7,114.4,101.5,113.4,101.5,120.8z" />
        <text x=180 y=220 font-size="40px">1</text>
          </svg>
</button>
<span class="likeCount"></span>

<script>
window.addEventListener('DOMContentLoaded',()=>{
  const likeButtonIcon = document.querySelector(".likeButton-icon");
  likeButtonIcon.addEventListener("click", function() {
    likeButtonIcon.querySelector('text').textContent-=-1;
  });
});
</script>

Comments

[homepage-site]

回答ありがとうございます。
count は必ずしも必要ないんですね…勉強になりました。

[homepage-site]

1点お聞きしたいことがありまして、カウントをリアルタイムで反映させてデータベースに保存する場合 Ajax を使う事になると思うのですが、調べたところカウントで jquery を使われている方が多いように感じました。
Javascript で作成することが多いため出来ればそちらで考えたいと思っております。
何故 jquery が主流なのか分かりますでしょうか？

※ 参考サイト
https://qiita.com/kanasann1106/items/4ea0675afde639e6d540

https://zenn.dev/torihazi/articles/2fefc4b673aea7