En este ejemplo, cuando muevo el mouse dentro de un div, quiero mostrar las (coordenadas x e y) de la posición actual del mouse, pero muestra un error. ¿Por qué?
function fifa(ev){ document.getElementById('div1').style.background = "cornsilk"; document.getElementById('div1').innerHTML = (ev.clientX + " " + ev.clientY); }
div { height:200px; width:200px; border:2px solid #000; background:green; display:inline-block; margin:20px; }
<div id="div1" onmousemove="fifa(ev)">onmousemove</div>
Su error es que está tratando de pasar la variable desconocida ev
, no existe. Puede pasar (evento) como lo hacen en el sitio que usó : myFunction(event)
Recomiendo enfáticamente cambiar a eventListener y también usar MDN sobre w3schools
const div1 = document.getElementById('div1'); // cache the element // only change colour once, using class div1.addEventListener("mouseenter", function(e) { this.classList.add("silk") }) div1.addEventListener("mouseleave", function(e) { this.classList.remove("silk") }) div1.addEventListener("mousemove", function(e) { this.innerHTML = (e.clientX + " " + e.clientY); })
div { height:200px; width:200px; border:2px solid #000; background:green; display:inline-block; margin:20px; } div.silk {background:cornsilk; }
<div id="div1">onmousemove</div>
Para su información, pero use mi versión, aquí hay una versión fija de su código.
Tenga en cuenta que paso el evento a la función y se recoge como ev; no se recomienda ya que ya está disponible EN la función
function fifa(ev){ // event passed as ev ev.target.style.background = "cornsilk"; // the div is the event target ev.target.innerHTML = (ev.clientX + " " + ev.clientY); }
div { height:200px; width:200px; border:2px solid #000; background:green; display:inline-block; margin:20px; }
<div id="div1" onmousemove="fifa(event)">onmousemove</div>
En su HTML simplemente cambie "ev" a evento y funcionará.
<div id="div1" onmousemove="fifa(event)">onmousemove</div>