Question

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

（经过网站用户的一些测试后，我似乎正确地做了...对于新问题跳到底部）

我几天前发布了一个几乎完全相同的问题，在那里我成功地使用document.write和document.addEventListener来监听和写入页面，但无法定位id描述符。事实证明有一些错别字，我误导了.innerHTML。我将backDrop作为目标，经过一些修正后，我能够用平方函数的输出替换其中的div。

这次我想要做的就是将一个嵌入一层的id更深层次。在我看来，我应该做的就是将元素变量从backDrop交换到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>

JavaScript /

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

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

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

＆＃13;

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
  element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
  return x * x;
}

＆＃13;

body {

 background-color: #3A3C3D; 		/*alt color #CCA #3A3C3D*/
 margin: 0;
 overflow: hidden;					/*top stop the extended shadow element height from causing the page to scroll*/
}



.backDrop {

 background-color: #FFF; 			/*alt colors #ACA null #CCA*/
 height: 100vh; width: 720px;
 margin: auto;
}
.backDrop:before {					/*for to get rid of backDrop shadow round-corners*/

 box-shadow: 0 -20px 20px 0 black;
 content:'';
 height: 200vh;
 position: absolute;				/*not sure why this is necissary, but it I know it is.*/
 width: 720px;
}



.interface {

 border-left: 2px solid red;
 border-radius: 5px;
 box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
 margin: auto;
 height: 270px; width: 480px;
}



.lineBreak {

 background-color: rgba(255,0,0,.3);
 border-bottom: 1px dashed black;
 height: 15px;
}

＆＃13;

<div class="backDrop" id="backDrop"><!--
 --><div class="lineBreak" id="addItem"></div><!--
 --><div class="lineBreak"></div><!--
 --><div class="interface">yo</div>
</div>

＆＃13;

新问题：CSS如何干扰JavaScript？

根据Barmar的说法，似乎特别是我用来设置我的背景div和它的阴影的CSS的组合在某种程度上阻止了Javascript将id嵌入其中。什么是陌生人，评论其中任何一个解决了问题（留下我的造型不完整或不正确）。这怎么可能？

Answer 1

position: absolute CSS中的问题是.backDrop。删除它可以让点击转到#addItem DIV，而不是转到.backDrop。

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
  element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
  return x * x;
}

body {

 background-color: #3A3C3D; 		/*alt color #CCA #3A3C3D*/
 margin: 0;
 overflow: hidden;					/*top stop the extended shadow element height from causing the page to scroll*/
}



.backDrop {

 background-color: #FFF; 			/*alt colors #ACA null #CCA*/
 height: 100vh; width: 720px;
 margin: auto;
}
.backDrop:before {					/*for to get rid of backDrop shadow round-corners*/

 box-shadow: 0 -20px 20px 0 black;
 content:'';
 height: 200vh;
 /* position: absolute;				/*not sure why this is necissary, but it I know it is.*/
 width: 720px;
}



.interface {

 border-left: 2px solid red;
 border-radius: 5px;
 box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
 margin: auto;
 height: 270px; width: 480px;
}



.lineBreak {

 background-color: rgba(255,0,0,.3);
 border-bottom: 1px dashed black;
 height: 15px;
}

<div class="backDrop" id="backDrop"><!--
 --><div class="lineBreak" id="addItem">click here</div><!--
 --><div class="lineBreak"></div><!--
 --><div class="interface">yo</div>
</div>

CSS如何干扰JavaScript？

1 个答案: