未能在OnClick事件中隐藏HTML元素

Question

我正在努力为用户单击特定按钮时隐藏html元素。当用户点击确认按钮时，我需要隐藏"保存草稿"。按钮。当我点击按钮时，什么也没发生。明显吗?

它似乎在这里工作，但不是在我的代码库。我不确定为什么会有任何问题。html有正确的JavaScript链接。

我可以看到隐藏属性被添加到元素中，但是，它实际上并没有隐藏它。我用的是小树枝，所以我不知道这会不会引起问题?

function addCampaignConfirmButton() {
document.getElementById("save_draft_button").hidden = true;
}

<button type="submit" id="confirm_button" class="custom-btn rounded-8 border-0 confirm background-blue f-14 text-white text-center text-decoration-none mx-3" onclick="addCampaignConfirmButton()">Confirm</button>
{% if campaign is empty or campaign.is_draft == 1 %}
<button type="submit" id="save_draft_button" class="custom-btn d-block rounded-8 save-draft blue-border f-14 bg-white text-blue text-center text-decoration-none mx-3 mb-2 mb-sm-0" onclick="addCampaignSaveDraftButton()">Save Draft</button>
{% endif %}

Answer 1

简单你可以使用这段代码。

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.classList.toggle("show");
});

如果你想在这个程序中使用这个函数，你可以使用这个代码。

<div id="myDIV" onclick="javascript:myFunction()">myDiv</div>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>

希望，你找到解决办法了!

Answer 2

也许你可以使用classlist和toolgle ?或者定义bool变量和点击后的检查状态?