Jak wyświetlić tekst o aktualnym położeniu myszki na ekranie?

Question

Witajcie,

jak wyświetlić tekst o obecnych współrzędnych myszki na ekranie? Mam na razie taki kod:

function showCoords (eventObj) {
            var map = document.getElementById("coords");
            var x = eventObj.clientX;
            var y = eventObj.clientY;
            map.innerHTML = "Współrzędne na mapie: "+ x + "," + y;
            
        }

Również chciałbym podzielić ekran na np. dwie części i z chwilą przejścia na jedną z nich wyświetlić komunikat "Jesteś na lewej stronie ekranu" i adekwatnie "Jesteś na prawie stronie ekranu".

Dziękuję.

Comments

https://stackoverflow.com/questions/7790725/javascript-track-mouse-position

Answer 1

Możesz postawić warunek typu if(x>window.innerWidth/2) to wtedy będziesz po prawej stornie ekranu i np. usuniesz/dodasz klasę modyfikującą kolor.

O tych współrzędnych to chyba nie do końca poprawnie napisałeś cały kod , powinno być:

map.innerHTML = `Współrzędne na mapie: ${x}, ${y}`;

Comments

Wygląda na poprawnie, operator + łączy stringi.

---

Racja , myślałem , ze brakuje cudzysłowu na zakończeniu , a faktycznie jest poprawny.

---

@krissto7

Dziękuję, możesz dopisać krótki kod w ciele tego IFa, gdzie zmieniałby się kolor? Coś kombinuje, ale nie wychodzi.

---

po prostu  

const pobranyelementtextowy = document.querySelector('p');

if(x>window.innerWidth/2) {

pobranyelementtextowy.classList.remove('blue');

pobranyelementtextowy.classList.add('red');

} else {

pobranyelementtextowy.classList.remove('red');

pobranyelementtextowy.classList.add('blue');

// pobranyelementtextowy.style.color = 'red'; // ewentualnie w taki sposób;

}

powinno działać , nie widzę dokładnego kodu htmla/cssa/js więc nie mogę bardziej pomóc.

---

Dziekuję, sprawdze.