Make an element class clickable

Question

I was trying to do this:
# Html
<div class="trigger">
<div class="box"></div>
</div>
# Css
.trigger {
width: 100px;
height: 100px;
}
.box {
width: 100px;
hieght: 100px;
background: #f00;
}
.trigger.On .box {
transform: translateY(-100px);
}
# Javascript + Jquery
$('.trigger').on('click', function() {
$(this).toggleClass('On');
});
<!-- But it doesn't work --> :'v

Answer 1

Hi Edwin Garcia,
Just add a onclick attribute to it
you can use onclick="clickfunc();"
attribute in almost every HTML tag.
Or make it an ID attribute and add an event addEventListener('click', id);

<div id="box" onclick="clickfunc();" ></div>

function clickfunc() {
// code to execute
}

window.onload = function() {
document.getElementById("box").addEventListener("click", id);
}

function id() {
document.getElementById("box").innerHTML = id()
}

Additional source:
https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Answer 2

THANKS 🌴Vincent Berger🌴 i'll try