I am attempting to open a bootstrap 5 modal programmatically, but when the code runs, nothing happens
My page includes bootstrap.min.js and I have an HTML modal template within the page
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
This is the javascript I have written to trigger the modal popup
var exampleModalPopup = new bootstrap.Modal(document.getElementById("exampleModal"), {});
var modalTitle = exampleModalPopup.querySelector('.modal-title');
var modalBodyInput = exampleModalPopup.querySelector('.modal-body input');
modalTitle.textContent = 'An error has occurred';
modalBodyInput.value = 'error';
exampleModalPopup.modal();
The modal popup object gets created but nothing happens, can someone point out where the issue may be? It's failing at
exampleModalPopup.querySelector('.modal-title');