Div onclick inner content not clickable? - html

Question

When I click on div-two I want to show div-2. I'm using Jquery index and it works but when I put other content/html inside the on-click div it always shows div-1 regardless of what button is clicked. On the following fiddle example if you click the green inner div you'll see the results.
I'm assuming this is an index or propagation issue, can this be corrected or am I pushing the limits of the function?
https://jsfiddle.net/1e230w8s/
// Matches and shows Butts to index order.
let $games = $('.game');
$('.butts').on('click', e => {
let $target = $games.eq($(e.target).index()).show();
$games.not($target).hide();
});
// Finds all Butts and calls `sumBoxes` onclick
const boxes = document.getElementsByClassName("butts");
for (let butts of boxes){ butts.addEventListener("click", sumBoxes); }
// sumBox Calculates each visible Box
function sumBoxes(event) {
var total = 0;
$('.box:visible').each(function() {
total += parseInt($(this).text());
});
$('.sum').html("Total : " + total); // Replaces contents of `.sum`
}
body {background: #eeeeee;}
.game {display:none;}
.box {float: left;font: bold 17px arial;text-align: center;margin: 10px 10px 20px 0;padding: 10px 25.54px;background: #fff;color: blue}
.butts {cursor:pointer; width:200px;height:40px;background:#fff; margin-bottom:10px; margin-right:10px; float:left;border:1px solid blue;}
.sum {clear:both;margin-top:40px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="float: left;width: 100%;">
<div class="butts">1 <div style="float:right;width:40px;height:20px;background:lightgreen;">1</div></div>
<div class="butts">2 <div style="float:right;width:40px;height:20px;background:lightgreen;">2</div></div>
<div class="butts">3 <div style="float:right;width:40px;height:20px;background:lightgreen;">3</div></div>
</div>
<div class="container">
<div class="game">
<div class="box">1 Box</div>
</div>
<div class="game">
<div class="box">2 Box</div>
</div>
<div class="game">
<div class="box">3 Box</div>
</div>
</div>
<div class="sum"></div>

Answer 1

In your current code you have use e.target so when you click on children div current target will be inner div tag and according to your code its value will be 0 that's why only first one is showing .Instead you can check if the e.target has butts class or not depending on this change your selector.
Demo Code :
// Matches and shows Butts to index order.
let $games = $('.game');
$('.butts').on('click', e => {
//check is target has class .butts
var target = $(e.target).hasClass("butts") ? $(e.target) : $(e.target).closest(".butts")
let $target = $games.eq(target.index()).show();
$games.not($target).hide();
});
body {
background: #eeeeee;
}
.game {
display: none;
}
.box {
float: left;
font: bold 17px arial;
text-align: center;
margin: 10px 10px 20px 0;
padding: 10px 25.54px;
background: #fff;
color: blue
}
.butts {
cursor: pointer;
width: 200px;
height: 40px;
background: #fff;
margin-bottom: 10px;
margin-right: 10px;
float: left;
border: 1px solid blue;
}
.sum {
clear: both;
margin-top: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="float: left;width: 100%;">
<div class="butts">1
<div style="float:right;width:40px;height:20px;background:lightgreen;">1</div>
</div>
<div class="butts">2
<div style="float:right;width:40px;height:20px;background:lightgreen;">2</div>
</div>
<div class="butts">3
<div style="float:right;width:40px;height:20px;background:lightgreen;">3</div>
</div>
</div>
<div class="container">
<div class="game">
<div class="box">1 Box</div>
</div>
<div class="game">
<div class="box">2 Box</div>
</div>
<div class="game">
<div class="box">3 Box</div>
</div>
</div>
<div class="sum"></div>