vfk799 wrote:
Quote:
This question may be as much about css as javascript. Here is my code.
>
<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>
>
I wish to change the yellow color to blue by clicking on it which works
fine for the above code.
>
However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.
I think the problem is that you have a div element within a div
element. I was under the impression that divs were block elements, and
should be 'stacked', so to speak. If I needed to do what you are trying
to do, I would consider using tables.
I could be wrong in my above statement, but I am guessing that due to
the nature of divs, by clicking on the inside div element, you are
also, clicking on the outer div element.
