問題の発生

Djangoのテンプレートで値がNoneだった場合、その情報をもとにHTMLの表示を切り替えたいことがある。例えば、データがあった場合は、試合結果を表示するようにし、データがない場合は、「データがありませんでした」と表示するようにしたい。
今回は以下のようにしたい
・match_countの値がnoneだった場合、match_count_sentenceのdisplayをnoneとする。
・match_countの値がnoneだった場合、match_result_sentence_noneのdisplayをblockとする。

<p id="match_result_sentence">{{ match_count }}戦でした。</p>
<p id="match_result_sentence_none">試合がありませんでした</p>

解決策

pタグ自体にmatch_countの値を埋め込み、その値で判断する。

手順

1.pタグに値を埋め込む

<p id="match_result_sentence" data-match-count="{{ match_count }}">{{ match_count }}戦でした。</p>

data-match-count="{{ match_count }}"をつけることによりpタグに値を埋め込むことができる

2.javascriptを以下のように記述

window.onload = function() {
    //各要素を取得
    const match_result_sentence = document.getElementById('match_result_sentence')
    const match_result_sentence_none = document.getElementById('match_result_sentence_none')
    //属性から値を取り出す
    const match_count = match_result_sentence.getAttribute('data-match-count')
    //値がNoneだった場合の処理
    if(match_count === 'None'){
        match_result_sentence.style.display = "none"; //試合結果の表示を消す
        match_result_sentence_none.style.display = "block"; //試合がない場合のメッセージを表示
    }
}

match_result_sentence.getAttribute(取り出したい値)で値をとりだすことができる。

学んだこと

・HTMLのタグにdata-名前='値'をつけることによりそのタグに値を埋め込むことができる。
・javascriptで変数名.getAttribute(変数のdata-タグ)とすることにより、値を取り出すことができる。
・結果として、値に応じてHTMLの要素を動的に表示/非表示にする方法を理解した。

これを応用すれば、Djangoから取得した値に応じて柔軟にUIを変更することができそうだ