变量未定义
问题描述:
所以我试图在下面的代码中获取变量x
和y
,以确定类别myElement
的图像位置。点击它应该将顶部和左侧样式设置为任何变量(光标的位置)。当我测试它时,它只是默认为undefined
。变量未定义
<!doctype html>
<html>
<body onclick="getCoord(event)" style="height:2000px;">
<h2>click</h2>
<p id="display"></p>
<script>
function getCoord(event) {
\t var x = event.clientX;
\t var y = event.clientY;
\t var coord = "x:" + x + "y:" + y;
\t document.getElementById("display").innerHTML = coord;
\t console.log(x);
\t console.log(y);
\t document.getElementById('myElement').style.position = "absolute";
\t document.getElementById('myElement').style.top = y; //or whatever
\t document.getElementById('myElement').style.left = x; // or whatever]
};
</script>
<img id="myElement" src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
</body>
</html>
答
CSS测量
你忘了添加the measurement的数字将被解释为。你的`x`后
<!DOCTYPE html>
<html>
<body onclick="getCoord(event)" style="height:2000px;">
<h2>click</h2>
<p id="display"></p>
<script>
function getCoord(event) {
\t var x = event.clientX;
\t var y = event.clientY;
\t var coord = "x:" + x + " y:" + y;
\t document.getElementById("display").innerHTML = coord;
\t console.log(x);
\t console.log(y);
var myEle = document.getElementById('myElement'); // no need to use 3 times
\t myEle.style.position = "absolute";
\t myEle.style.top = y + "px"; // plus "px"
\t myEle.style.left = x + "px"; // plus "px"
};
</script>
<img id="myElement" src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
</body>
</html>
+0
这样一个明显的,我错过了的事y'! – KenzoEngineer
+0
它发生在我们身上@KenzoEngineer :-) –
戴上'+'px''和'当你设置'left'和'top' – myfunkyside