Draw all histograms and put them in a container with the class
hist-all.
x = faithful$eruptions
for (i in n_breaks) {
hist(x, breaks = seq(min(x), max(x), length.out = i + 1),
main = paste('n = ', i))
}
But we hide all of those images initially with CSS.
/* hide all images */
.hist-all img { display: none; }
/* but show the image with the class 'show' */
.hist-all .show { display: block; }
When the choice in the select input is changed, show the histogram with the selected number of bins.
(d => {
const s = d.getElementById('n_breaks'), // the select input
imgs = d.querySelectorAll('.hist-all img'); // all histograms
// add the class 'show' to the i-th image, where i is the
// selected number in the select input
function showImg() {
const i = s.selectedIndex;
imgs.forEach((el, k) => {
// k is the index of the image; i is the index of the choice
// in the select input; add the class 'show' if the two
// indices are equal
el.classList.toggle('show', k == i);
});
}
// show the initial image
showImg();
// show a different image when select input is changed
s.onchange = showImg;
})(document);