按下li或网址中的#号后,更改宽度div

我编写了一个代码,当您按下选定的li时设置.l​​ine的宽度。我也想要,如果url包含#first,则给.line元素#first的宽度。为什么这段代码行不通。请帮我。

var set = document.querySelectorAll('li');
var line = document.querySelector('.line');

if(window.location.hash == "#first"){
  setTypeIndicatorAnim(document.querySelector('#first'));
};

for(i=0;i<set.length;i++)set[i].addEventListener('click',lineScale(el));
function lineScale(el){
  line.style.transform = 'scaleX(' + el.getBoundingClientRect().width + ')';
};
<ul>
  <li><a href="#first" id="first">First</a></li>
  <li><a href="#second" id="second">Second</a></li>
  <li><a href="#third" id="third">Third</a></li>
  <li><a href="#fourth" id="fourth">Fourth</a></li>
  <span class="line"></span>
</ul>
li {
  display: inline-block;
}
.line {
  display: block;
  width: 1px;
  height: 2px;
  transform-origin: left;
  background-color: #000;
}
评论