style.displayの値が書き換えられない

Question

お世話になります。回答よろしくお願いいたします。

前提・実現したいこと

ボタンを押下した際、ボタンの弟要素の表示非表示を切り替えたい

発生している問題・エラーメッセージ

ボタンを押下しても表示非表示が切り替わらない

該当のソースコード

<li>
    <span>what is hoge?</span>
    <button onclick="showAnswer(this)">answer</button>
    <div style="display: none;">hoge is fuga.</div>
</li>

function showAnswer(btn) {
    let answerDisplay = btn.nextElementSibling.style.display;
    if (answerDisplay == "block") {
        answerDisplay = "none";
    } else {
        answerDisplay = "block";  // 書き換わらない(。´･ω･)?
    }
}

試したこと

上記のコメント部分でデバッグが止まるので要素は取得できている

Answer 1

btn.nextElementSibling.style.displayで取得できるのがただの文字列だからです。

function showAnswer(btn) {
    let answerDisplay = btn.nextElementSibling.style;
    if (answerDisplay.display == "block") {
        answerDisplay.display = "none";
    } else {
        answerDisplay.display = "block";
    }
}

Answer 2

let answerDisplay = btn.nextElementSibling.style.display;といったん変数にコピーしてしまっているので、answerDisplay = 'none'のように代入しても、この変数が書き換わるだけで、DOMのスタイルには影響しません。

const elem = nextElementSibling;として、elem.style.display = 'none';のようにしてください。

Comments

[kyoya0819]

const elem = nextElementSibling;
-> const elem = btn.nextElementSibling;
では？