Working on implementing data buttons, struggling to make the function operational. Attempting to assign a class to an element through a data attribute and corresponding ID, then wanting to prevent event propagation with the button contained within the subject.
This is what has been achieved so far:
HTML:
<div class ="subject" id="subject1">
<button class="remove">Remove</button>
The Subject
</div>
<div class ="subject" id="subject2">
<button class="remove">Remove</button>
The Subject 2
</div>
<div class ="subject" id="subject3">
<button class="remove">Remove</button>
The Subject
</div>
<button class="trigger" data-subject="subject1">Trigger</button>
<button class="trigger" data-subject="subject2">Trigger</button>
<button class="trigger" data-subject="subject3">Trigger</button>
CSS:
.active {
color:red
}
JS:
var subject = document.querySelector('.subject');
var trigger = document.querySelector('.trigger');
var remove = subject.querySelector('.close');
var data = trigger.getAttribute("data-subject");
var datajs = (function () {
function init() {
[].forEach.call(trigger),function(btn) {
btn.onclick = function() {this.classList.add("active");}
});
remove.addEventListener('click', function (ev) {
ev.stopPropagation();
removeModalHandler();
});
});
}
init();
})();
View the fiddle here: http://jsfiddle.net/tNS62/1/
My expertise in JS could use some improvement, evident from the code.