CSS 如何干扰 JavaScript？

Question

Original question: How can i embed JavaScript function targets?

(It seems after some testing by site users that I was doing it correctly... For the NEW QUESTION skip to the bottom)

I posted an almost identical question a couple days ago, where I had succeeded in listening and writing to the page with document.write and document.addEventListener but was unable to target id descriptors. As it turned out there were some typos and I was misusing .innerHTML . I targeted backDrop and after some corrections I was able to replace the div 's inside it with the output of a squaring function.

This time all I want to do is target an id embedded one level deeper. It appears to me that all I should have to do is swap the element variable from backDrop to addItem , but that isn't working. heh How can I get this to work, and is every step going to present a new road block?

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;
}

 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"></div><!-- --><div class="lineBreak"></div><!-- --><div class="interface">yo</div> </div>

New question: How can CSS interfere with JavaScript?

According to Barmar, it seems that specifically the combination of CSS I used to style my background div and it's shadow are somehow preventing the Javascript from targeting id 's embedded within it. What's stranger is that commenting either one of them out fixes the problem (leaving my styling incomplete or incorrect). How is this possible?

Answer 1

The problem is position: absolute in the .backDrop CSS. Removing that allows the click to go to the #addItem DIV, instead of going to .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>