CSS如何干扰JavaScript？

原始问题：如何嵌入JavaScript函数目标？

（经过一些网站用户的测试，我似乎做得很正确……对于新问题，请跳到底部）

几天前，我发布了一个几乎相同的问题，在那里我成功地通过

document.write

和

document.addEventListener

收听和写入了页面，但无法针对id描述符。结果是有一些打字错误，我误用了

.innerHTML

。我瞄准了背景，经过一些修正后，我能够用平方函数的输出替换它里面的

div

这一次，我想做的就是将id嵌入更深一层。在我看来，我应该做的就是将元素变量从

background

交换到

addItem

，但这不起作用。呵呵，我怎样才能让它起作用呢？每一步都会成为一个新的障碍吗

HTML/

<div class="backDrop" id="backDrop">
 <div class="lineBreak" id="addItem"></div> <!-- class styled 16 pixels thick -->
 <div class="lineBreak"></div>
 <div class="interface">yo</div>
</div>

var-element=document.getElementById（“addItem”）；
元素。addEventListener（'click'，promptFunction）；
函数提示函数（）{
element.innerHTML=square（window.prompt（'inputvar'）；
}
函数平方（x）{
返回x*x；
}

正文{
背景色：#3A3C3D；/*alt color#CCA#3A3C3D*/
保证金：0；
溢出：隐藏；/*顶部阻止扩展阴影元素高度导致页面滚动*/
}
.背景{
背景色：#FFF；/*alt colors#ACA null#CCA*/
高度：100vh；宽度：720px；
保证金：自动；
}
.background:before{/*用于去除圆角处的背景阴影*/
盒影：0-20px 20px 0黑色；
内容：''；
高度：200vh；
位置：绝对；/*不确定为什么这是必要的，但我知道这是必要的*/
宽度：720px；
}
.接口{
左边框：2倍纯红；
边界半径：5px；
盒影：0.5px-2pxRGBA（0,0,0,4）；
保证金：自动；
高度：270px；宽度：480px；
}
.换行符{
背景色：rgba（255,0,0,3）；
边框底部：1px黑色虚线；
高度：15px；
}

yo
问题在于
位置：绝对
在
.background
CSS中。删除允许单击转到
#addItem
DIV而不是转到
.background


var-element=document.getElementById（“addItem”）；
元素。addEventListener（'click'，promptFunction）；
函数提示函数（）{
element.innerHTML=square（window.prompt（'inputvar'）；
}
函数平方（x）{
返回x*x；
}
正文{
背景色：#3A3C3D；/*alt color#CCA#3A3C3D*/
保证金：0；
溢出：隐藏；/*顶部阻止扩展阴影元素高度导致页面滚动*/
}
.背景{
背景色：#FFF；/*alt colors#ACA null#CCA*/
高度：100vh；宽度：720px；
保证金：自动；
}
.background:before{/*用于去除圆角处的背景阴影*/
盒影：0-20px 20px 0黑色；
内容：''；
高度：200vh；
/*位置：绝对；/*不确定为什么这是必要的，但我知道这是必要的*/
宽度：720px；
}
.接口{
左边框：2倍纯红；
边界半径：5px；
盒影：0.5px-2pxRGBA（0,0,0,4）；
保证金：自动；
高度：270px；宽度：480px；
}
.换行符{
背景色：rgba（255,0,0,3）；
边框底部：1px黑色虚线；
高度：15px；
}
点击这里
addItem
DIV中没有可单击的内容。我添加了一些文本。它不起作用了。另外，div的样式是16像素，只要你点击它而不是在它周围，div本身就足够了吗？div有一个高度，但没有宽度。如果我注释掉
.background
或
.background:在
CSS之前，它可以工作。CSS阻止点击进入
.addItem
DIV.@Barmar Woah，糟糕透了。它为什么这么做？但为什么会干扰？看起来，css是什么并不重要。此外，如果没有position属性，阴影会消失。我只会对background元素应用一个框阴影，而不添加psuedo选择器，但阴影的角会显示出来。似乎定位导致
#background
DIV覆盖在
#addItem
DIV的顶部。因此，当鼠标在这两个元素上时，目标是
#background
。
var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
 return x * x;
}