JavaScript style.height of sister div on mouseover

Question

I'm trying to simulate the look of an audio visualizer so that on mouseover, "this" div becomes the tallest div, while the sister divs shift heights as well. How do I specify which height the sister divs should change to?

Code

 window.onload = window.onscroll = function() { var bars = document.getElementsByClassName('bar'); [].forEach.call(bars, function(bar) { bar.style.height = Math.random() * 50 + '%'; }); } 

 .bars { position: fixed; top: 30px; right: 0; bottom: 40px; left: 0; margin: 10px auto; text-align: center } .bars::before { content: ""; display: inline-block; height: 100%; } .bar { display: inline-block; vertical-align: bottom; width: 4rem; height: 25%; margin-right: .75em; background: #333; -webkit-transition: height 0.5s ease-out; transition: height 0.5s ease-out; } 

 <div class="container"> <div class="bars"> <div class="bar" id="barOne"></div> <div class="bar" id="barTwo"></div> <div class="bar" id="barThree"></div> <div class="bar" id="barFour"></div> <div class="bar" id="barFive"></div> </div> </div> 

Thanks for your help!

Answer 1

Here's a fiddle that should get you pointed in the right direction: https://jsfiddle.net/8p2yvro9/7/

let container = document.getElementsByClassName('container')[0];
let bars = document.getElementsByClassName('bar');

[].forEach.call(bars, bar => {
  bar.addEventListener('mouseover', function() {
    shiftBars(bar);
  });
});

function shiftBars(barOver) {
  [].forEach.call(bars, function(bar) {
    bar.style.height = Math.random() * 50 + '%';
  });
  barOver.style.height = '100%';
}