javascript - 如何将javascript效果反转回显示:none when button is clicked again?

Question

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>

   
function updateProfile() {
    console.log(this)
    document.getElementById("form1").style.display = "block";
}

我只能以一种方式更改效果。如何将效果更改回显示:无，以便表单不再可见？

Answer 1

要达到预期结果，请使用以下带有 bool 变量的切换选项

1. 默认将变量设置为 false
2. 每次点击函数时，都会切换其值
3. 根据变量的条件，设置阻止或无

var toggle = false
function updateProfile() {
  toggle =!toggle
    document.getElementById("form2").style.display = toggle ? "block" : "none";
}

<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>