Bootstrap 5 modal popup not activating from JavaScript

Question

Im trying to programmatically open a bootstrap 5 modal, but nothing happens when the code executes.

I have bootstrap.min.js included in my page, I have a HTML modal template in my 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 open 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 is created but nothing happens, can anyone tell me where Im going wrong here ? It falls over at

exampleModalPopup.querySelector('.modal-title');

Answer 1

The problem is you're attempting to use querySelector() on an Bootstrap Modal object, not a DOM object. Instead so something like this....

var exampleModal= document.getElementById("exampleModal");
var exampleModalPopup = new bootstrap.Modal(exampleModal, {});
var modalTitle = exampleModal.querySelector('.modal-title');
var modalBodyInput = exampleModal.querySelector('.modal-body input');
modalTitle.textContent = 'An error has occurred';
modalBodyInput.value = 'error';
exampleModalPopup.show();

Codeply

Additionally, use the show() method as there's no modal() method.