0

Les escribo para pedirle apoyo en lo siguiente, Quisiera saber por que motivo me aparece el siguiente error:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <!-- JQuery only -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="prueba.css" />


</head>

<body>

    <br>
    <h2 class="lines-effect">La Historia de mi Vida</h2>

    <br>
    <button onclick=btnButton() class="btn btn-primary">Abrir Modal</button>
    <div class="modal fade" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                    <button type="button" class="close" data-modal="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal Body Text goes here:</p>
                </div>
                <div class="modal-footer">
                    <p>Modal Body Text goes here:</p>
                    <button type="button" class="close" data-modal="modal" aria-label="Close">Close</button>
                    <button type="button" class="close" data-modal="modal" aria-label="Close">Save Change</button>
                </div>
            </div>
        </div>
    </div>
   
    <script>
        function btnButton() {
            alert("hola");
            document.getElementById("modal").modal("show");
        };
    </script>
</body>

Debe ser algún llamado o disparador o el nombre del tag que pueda funcionar, no se por que el document.ElementById no funciona.

Error : 6div-diagonal.html:120 Uncaught TypeError: document.getElementById(...).modal is not a function at btnButton (div-diagonal.html:120) at HTMLButtonElement.onclick (div-diagonal.html:82) btnButton @ div-diagonal.html:120 onclick @ div-diagonal.html:82

1 respuesta 1

1

Es sencillo, getElementById es una funcion que devuelve un nodo DOM y entre sus metodos no estan el metodo "modal()".

Es mejor que leas la documentacion de bootstrap sobre modales y su js.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.