El método Click() no funciona y la Consola devuelve un mensaje de error en JavaScript

En este artículo, veremos el error “ TypeError no detectado: document.getElementsByClassName(…).click is not a function ” creado al usar el método click() en JavaScript. 

Error de tecleado

Enfoque: primero verifique dos veces que haya escrito un documento.getElementsByClassName y no un documento.getElementByClassName. Si lo escribió correctamente, probablemente este error surja porque no sabe que document.getElementsByClassName devuelve una array de elementos, no un solo elemento. Para evitar el error, debe acceder a un solo elemento y luego realizar un clic() .

Ejemplo: El siguiente ejemplo de código crea el TypeError no capturado anterior porque aún no hemos accedido a un elemento individual.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script>
        function btnA() {
            document.getElementById('result').innerHTML = 
            "You've successfully clicked on the button";
        }
      
        function btnB() {
            document.getElementsByClassName('active').click();
        }
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>Generates a TypeError</h3>
    <div id="result"></div>
    <button class="active" 
            onclick="btnA();">
        Button A
    </button>
    <button class="trigger" 
            onclick="btnB();">
        Button B
    </button>
</body>
</html>

Salida: este error aparece cuando hacemos clic en el botón B.

 

Ejemplo: Este ejemplo resuelve el TypeError anterior accediendo a un elemento individual. Este código resuelve el TypeError mencionado anteriormente simplemente especificando un elemento individual en document.getElementsByClassName() .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script>
    function btnA() {
        document.getElementById('result').innerHTML = 
        "You've successfully clicked on the button";
    }
  
    function btnB() {
        document.getElementsByClassName('active')[0].click();
    }
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>Resolving a TypeError</h3>
    <div id="result"></div>
    <button class="active" 
            onclick="btnA();">
        Button A
    </button>
    <button class="trigger" 
            onclick="btnB();">
        Button B
    </button>
</body>
</html>

Salida:  ahora, cuando se hace clic en el botón B, en lugar de un error, muestra el mensaje «Ha hecho clic con éxito en el botón».

 

Publicación traducida automáticamente

Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *