Chartjs-Beginner in JS,Stuck with ChartJS and multiple filters and ways to display

by

0👍

Just change the select and the box will be changed too.
if you need more boxes just add a new div with class box and some id but note you have to add option too and the value must be the same id of the box to relate to each ohter.

I hope that can help.

<div class="box active" id="chartJS-1">Box 1 is here</div>
<div class="box" id="chartJS-2">Box 2 is here</div>
<div class="box" id="chartJS-3">Box 3 is here</div>
<select id="select">
    <option value="chartJS-1" selected>chartJS-1</option>
    <option value="chartJS-2">chartJS-2</option>
    <option value="chartJS-3">chartJS-3</option>
</select>


.box {
    height: 100px;
    background: rgb(121, 3, 105);
    color: #fff;
    text-align: center;
    font-size: 50px;
    font-family: 'Courier New', Courier, monospace;
    display: none;
}
.box.active {
    display: block;
}


const select = document.querySelector('#select');
const boxes = document.querySelectorAll('.box');
select.onchange = _ => {
    let value = select.value;
    boxes.forEach(box => box.classList.remove('active'));
    document.querySelector(`#${value}`).classList.add('active');
};

Leave a comment