Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code:
HTML:
<article id='one'>
<div id='somediv' class='up'>Stuff</div>
</article>
This is just a snippet of my actual code.
Javascript:
articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
articles[i].addEventListener('click',redirect,false);
}
var UpVote = document.querySelectorAll(".up");
for (var i = 0, length = nodeList.length; i < length; i++) {
UpVote[i].addEventListener('click',UpVote,false);
}
function UpVote(){
alert(this.id);
}
I have set up event listeners for both article objects and elements with the .up class. The functions are working correctly. I haven't included the redirect function since it is functioning properly and redirects as expected.
CSS:
.up{
display:block;
padding-left:3px;
background:rgba(150,195,225,.4);
border-radius:5px;
-webkit-box-shadow:1px 1px 2px rgba(110,110,110,.1);
width:20px;
-webkit-transition: width .3s;
}
The article is also styled as a block element.
Any assistance with this issue would be greatly appreciated!