How to correctly use the event click on Javascript?

Navigation
4

Good day
I do not understand what the error is, what I want is that when you touch Hello , change to Mundo 

function cambiardiv(){
    var i=document.getElementById("a").click="Mundo"
}
window.onload=cambiardiv;
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="eventoclick_ext.js"></script>
</head>
<body>
    <div id="a">Hola</div>
</body>
</html>

I would also like to know if it is possible that by going back to play the world, the div will change to hello, and so in a kind of loop ...

    
asked by Ale 24.11.2017 в 18:24
source

3 answers

2

If you are looking for the event under an external script, you can use the addEventListener method to add the click event to your element, and the function that will be executed when that event is triggered.

Original answer

HTML 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <div id="a">Hola</div>

    <!-- Tu script externo debería estar aquí, casi terminando el elemento body --> 
    <script src="eventoclick_ext.js"></script>
</body>
</html>

JavaScript ( eventoclick_ext.js ) 

/* Elemento DIV que cambia su texto */
var a = document.getElementById("a");

/* Se agrega el evento al elemento */
a.addEventListener("click", changeText);

/* Función que se gatilla al hacer click en el elemento DIV */
function changeText() {
    if (a.innerHTML == "Hola") {
        a.innerHTML = "Mundo";
    } else if (a.innerHTML == "Mundo") {
        a.innerHTML = "Hola"; 
    }
}

Additional: If the JS script is located in the element <head>

HTML 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="eventoclick_ext.js"></script>
</head>
<body function>
    <div id="a">Hola</div>
</body>
</html>

JavaScript ( eventoclick_ext.js ) 

/* Al cargar la página se gatilla el listener */
window.addEventListener("load", main);

function main() {
    /* Elemento DIV que cambia su texto*/
    var a = document.getElementById("a");

    /* Se agrega el evento */
    a.addEventListener("click", changeText);

    /* Función que se gatilla al hacer click en el elemento DIV */
    function changeText() {
        if (a.innerHTML == "Hola") {
            a.innerHTML = "Mundo";
        } else if (a.innerHTML == "Mundo") {
            a.innerHTML = "Hola"; 
        }
    }
}
    
answered by 24.11.2017 / 19:42
source
4

What you must do is indicate by means of the Jquery selector $ that the div with id = a at the time of clicking will perform the insertion of text depending on what you have written at the time. 

$('#a').click(function(){
    var i=document.getElementById("a");
    var temp = i.innerHTML;

     if(temp=="Hola"){
        i.innerHTML = "Mundo";
     }else{
        i.innerHTML = "Hola";
    };
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="eventoclick_ext.js"></script>
</head>
<body>
    <div id="a">Hola</div>
</body>
</html>
    
answered by 24.11.2017 в 18:38
3

It can be solved like this: 

<div id="a" onclick="cambiarDiv();">Hola</div>

<script type="text/javascript">

    function cambiarDiv(){

        var contenido = document.getElementById('a').innerHTML;
        if (contenido == "Hola") {
            document.getElementById('a').innerHTML = "Mundo";
        }else{
            document.getElementById('a').innerHTML = "Hola";
        }

    }

</script>
    
answered by 24.11.2017 в 18:39
Move a node of type element Capitalize word and phrase taking into account signs and accents