Unable to set none to display property in JavaScript [closed]-CodePudding

I am writing to show a flash text to the user, I want it to disappear after 3 seconds. I have tried to use settimeout but there's no result, I can change the colour and other properties but not the display property.I am using bootstrap for the styling. This is my code:

<div  class="flashtext alert alert-primary d-flex justify-content-between" role="alert">
  <%= messages %>
      <%=console.log(messages) %>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script>
  const tiptext = document.querySelector('.flashtext');

  function myFunction() {
    setTimeout(function () {
      tiptext.style.display = 'none'; }, 3000);
  }
  myFunction();
</script>

CodePudding user response：

I test your code it's running and there wasn't any problem,also it works in code snippet! check the other thing that have effect on your code.