почему мышиные coodrinates не появляются - PullRequest
Новая
       1

почему мышиные coodrinates не появляются

0 голосов
/ 16 мая 2018

Я изучаю Javascript DOM.написал этот код, было много ошибок в консоли.наконец все улажено.но координаты мыши не отображаются.изучение addEventListener и использование querySelector.где я делаю не такзастрял на нем два дня.
Вот JSFiddle: https://jsfiddle.net/088a9at5/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MouseEvent</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
  <div class="coordinateBox"></div>
  <div class="result"></div>


  <script src="script.js"></script>
</body>
</html>

.coordinateBox {
  width: 400px;
  height: 200px;
  border: 2px solid black;
}

const RECT = document.querySelector(".coordinateBox");
const ANS = document.querySelector("result");

function mouseCoordinate(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coo = "X : " + x + " Y : " + y;
  document.querySelector("result").innerHTML = coo
}
if(ANS){
  ANS.onclick = mouseCoordinate;
}

Ответы [ 4 ]

0 голосов
/ 16 мая 2018

Вам не хватало двух.в .result и вам нужно создать слушатель по прямоугольнику, а не по результату. 

const RECT = document.querySelector(".coordinateBox");
const ANS = document.querySelector(".result");

function mouseCoordinate(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coo = "X : " + x + " Y : " + y;
  document.querySelector(".result").innerHTML = coo
}
if(ANS){
  RECT.onclick = mouseCoordinate;
}
.coordinateBox {
  width: 400px;
  height: 200px;
  border: 2px solid black;
}
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
<div class="coordinateBox"></div>
<div class="result"></div>
0 голосов
/ 16 мая 2018

На основе вашей скрипки
Потому что вы просто пропустили идентификатор класса . в этой строке
const ANS = document.querySelector("result"); до result
Так должно быть
const ANS = document.querySelector(".result");

То же самое с document.querySelector("result").innerHTML = coo этой строкой.

И укажите некоторую высоту и ширину для result div и границы, чтобы вы могли видеть, в какой области вы должны щелкнуть.

0 голосов
/ 16 мая 2018

Помимо исправления имени селектора в querySelector в querySelector('.result'),
, если вы нацелите клик на элемент ANS, он никогда не будет запущен, потому что элемент имеет высоту и ширину 0;

Вместо этого, если вы нацелены на RECT, это работает,

https://jsfiddle.net/088a9at5/4/

0 голосов
/ 16 мая 2018

Вам не хватает . в document.querySelector("result"), которое должно быть document.querySelector(".result").

Другая важная проблема заключается в том, что вы не добавили прослушиватель событий.

RECT.addEventListener('mousemove', mouseCoordinate)

Вот ваш jsfiddle , , который сейчас работает.

Также,Вот очень простой codepen , который иллюстрирует гайки и болты.

PS В вашем jsfiddle у вас нет стиля ANS так сложно сказать, к чему вы хотите прикрепить событие click?И по какой-то причине он не позволяет мне стилизовать элемент .result: /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...