javascript – Show or hid div on IOS and Mac

Im trying to show an image for only mac and ios for imessage fuction on the website im working on. The code i have is with help of other sources on stack. Can anyone assist to why its not working. I do have the div to display none at the start.

<script type="text/javascript">
  // Function to check if the user is using iOS or macOS
  function isIOSorMac() {
    return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel' || navigator.platform === 'MacPPC';
  }

  // Function to show or hide the div based on the device
  function showOrHideDiv() {
    var iosMacDiv = document.getElementById('ios-message');

    if (isIOSorMac()) {
      iosMacDiv.style.display = 'block';
    } else {
      iosMacDiv.style.display = 'none';
    }
  }
</script>


<!-- END Show IOS Button for Chat END-->

I have tried adding a fuction to start the fuction at page load, but then get hung up on iosMacDiv.style.display = 'none';