Javascript 为什么老鼠不出现_Javascript_Html_Css_Dom

Javascript 为什么老鼠不出现

javascript html css dom

Javascript 为什么老鼠不出现,javascript,html,css,dom,Javascript,Html,Css,Dom,我正在学习javascript DOM。写这段代码时，控制台中有很多错误。最后一切都解决了。但是没有显示鼠标坐标。学习addEventListener和使用querySelector。我哪里做错了。两天以来一直坚持着。以下是JSFIDLE：您缺少文档.querySelector（“结果”）中的，它应该是文档.querySelector（“结果”）另一个主要问题是您没有添加事件侦听器。 RECT.addEventListener（'mousemove'，mousecoordinal）这是您

我正在学习javascript DOM。写这段代码时，控制台中有很多错误。最后一切都解决了。但是没有显示鼠标坐标。学习addEventListener和使用querySelector。我哪里做错了。两天以来一直坚持着。
以下是JSFIDLE：

您缺少

文档.querySelector（“结果”）

中的

，它应该是

文档.querySelector（“结果”）

另一个主要问题是您没有添加事件侦听器。

RECT.addEventListener（'mousemove'，mousecoordinal）

这是您的，，它正在工作

此外，这里还有一个非常简单的，说明了螺母和螺栓

另外，在您的JSFIDLE中，您没有设置ANS的样式，因此很难确定要将单击事件附加到什么？出于某种原因，它不允许我根据您的小提琴设置

.result

元素的样式：/

因为您刚刚错过了此行中的类标识符

const ANS=document.querySelector（“结果”）在结果之前


应该是这样的

const ANS=document.querySelector（“.result”）
与document.querySelector（“result”）.innerHTML=coo这一行相同
并为您的结果提供一些高度和宽度
div和边框，以便您可以看到必须单击的区域。
除了将querySelector中的选择器名称与querySelector（'.result'）相对应之外，

如果您以元素ANS
为目标，它将永远不会被激发，因为元素的高度和宽度为0
相反，如果您以RECT
为目标，它会工作
你少了两个。在.result
中，您需要在矩形上而不是结果上创建侦听器

const RECT=document.querySelector（“.coordinateBox”）；
const ANS=document.querySelector（“.result”）；
功能鼠标坐标（e）{
var x=e.clientX；
变量y=e.clientY；
var coo=“X:+X+”Y:+Y；
document.querySelector（“.result”）.innerHTML=coo
}
如果（ANS）{
RECT.onclick=鼠标坐标；
}
.coordinateBox{
宽度：400px；
高度：200px；
边框：2件纯黑；
}
将鼠标悬停在此文本上
我假设这里代码块中的css和js在不同的文件中？首先，您缺少文档中的
。querySelector（“结果”）
应该是文档。querySelector（“.result”）
@Cerbrus yes都是不同的文件。另外，因为
是空的（里面没有文本），你不能点击它。点击处理程序在上面，也许你想点击另一个元素？@Kaddath我想要这样的@Tarique给我一点时间，我会找到的out@Tarique请参阅我的评论，您可能无法单击结果
，因为它是空的，请在其中添加文本，它将work@Tarique我的回答中包含了一个密码笔，用一个非常简单、有效的解决方案！主要问题不是（！）缺少事件侦听器。因为他只想在点击后显示结果，所以他的代码完全没有问题。不要说.onclick
没有，这会让人感到困惑work@jdickel嗯。。。我没有说onclick不起作用？你在说什么？非常感谢！那真是一团糟。非常感谢你。我把事情搞砸了。因为我必须在const ANS中显示结果，所以我认为我需要瞄准它！但是应该做的是我需要定位鼠标移动的位置，对吗？是的，你想要接收点击事件的元素，如果我们不使用它，为什么我们需要if（ANS）东西，如果它显示空错误。如果你试图创建一个属性（在你的例子中是onclick
），这是一个更一般的js概念如果为null（如果找不到选择器，document.query选择器将返回什么），则会出现错误。如果
防止了该错误，则为。
<!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;
}