Failing to hide HTML element within OnClick Event-CodePudding

I'm struggling to hide a html element for when the user clicks on a particular button. When the user clicks the confirm button, I need to hide the "save draft" button. When I click on the button, nothing happens. Anything obvious?

It appears to work on here, but not within my codebase. I'm not sure why there would be any issue. The html has the correct link to the JavaScript.

I can see that the hidden attribute is being added the the element, however, it isn't actually hiding it. I'm using twig, so I don't know if that's causing issues?

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

<button type="submit" id="confirm_button"  onclick="addCampaignConfirmButton()">Confirm</button>

{% if campaign is empty or campaign.is_draft == 1 %}
 <button type="submit" id="save_draft_button"  onclick="addCampaignSaveDraftButton()">Save Draft</button>
{% endif %}

CodePudding user response：

Simple you can use this code.

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function() {
  content.classList.toggle("show");
});

And if you want to use the function in this program, you can use this code.

<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>

Hope, You found solution!

CodePudding user response：

Maybe you can use classlist and toogle? Or defined bool variable and checking state afrer click ?