Problems with onmouseclick and onmouseover in JavaScript

Navigation
4

I have the following code:

 Javascript Test     

<script>
    function mudaLampada(tipo){
        if(tipo == 1){
            arquivo = "_imagens/lampada-acesa.jpg";
        }
        if(tipo==2){
            arquivo= "_imagens/lampada-apagada.jpg";
        }
        if(tipo == 3){
            arquivo= "_imagens/lampada-quebrada.jpg";
        }
        document.getElementById("luz").src= arquivo;
    }
</script>


<body>
    <h1>Acenda Lampada</h1>
    <img src="_imagens/lampada-apagada.jpg" id="luz"  onmouseover="mudaLampada(1)" onmouseout="mudaLampada(2)" onmouseclick="mudaLampada(3)">
</body>

The function works for types 1 and 2, but for type 3 nothing happens; Can someone find the error? Thank you.

    
asked by anonymous 22.12.2015 / 16:44

2 answers

6

Uses the onclick attribute and not onmouseclick . Note also that when you click and lift the mouse it will immediately move to the onmouseover state.

To fix this or use onmouseenter (example) or create a logic like this: 

var partida = false;

function mudaLampada(tipo) {
    if (partida) return;
    if (tipo == 1) {
        arquivo = "_imagens/lampada-acesa.jpg";
    } else if (tipo == 2) {
        arquivo = "_imagens/lampada-apagada.jpg";
    } else if (tipo == 3) {
        arquivo = "_imagens/lampada-quebrada.jpg";
        partida = true;
    }
    document.getElementById("estado").innerHTML = arquivo;
}

jsFiddle: link

    
22.12.2015 / 16:52
1

Change the onMouseClick, to onClick. 

<body>
    <h1>Acenda Lampada</h1>
    <img src="_imagens/lampada-apagada.jpg" id="luz"  onmouseover="mudaLampada(1)" onmouseout="mudaLampada(2)" onclick="mudaLampada(3)">
</body>
    
22.12.2015 / 16:46
How to compare two arrays and return the difference between them? What is the elegant way to read this PHP Object?