рони,
А почему так?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.calculator {
max-width: 110px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 220px;
margin: 20px auto 20px;
color: #946FF2;
}
.level_one {
color: #2189FF;
padding: 10px 0px 10px 10px;
margin: 0px 0px 10px 0px;
border-left: solid 1px #2189FF;
}
.sum_all_level_one {
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #1D76DB;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #1D76DB;
}
.num_level_two {}
.level_three {
color: #619DE1;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #619DE1;
}
</style>
</head>
<body>
<div class="total_amount">
21 000
</div>
<div class="calculator">
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
5 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
13 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="number">
<span class="num_level_two sum_all_level_two">
9 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_two">
1 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_two">
7 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
calculator.addEventListener('change', function ({
target
}) {
console.log(target.className);
if(target.classList.contains("level__1")){
console.log("Click: level_1");
let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two label.number")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelOneChildren);
}
if(target.classList.contains("level__2")){
console.log("Click: level_2");
let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three label.number")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelTwoChildren);
}
})
</script>
</body>
</html>
При клике
level__1 где
13 000 я получаю 4 детей а по идее мне нужно 2 детей
level_two label.number где 4 000 и 9 000 а по итогу получаю 4 детей где 4 000 9 000 1 500 7 500