Modifying DOM using typescript got undefined value

Question

So, I have this typescript code to modify my HTML

var percentageBars = document.getElementsByClassName("inner-bar") as HTMLCollectionOf<HTMLDivElement>;
    console.log(percentageBars[0]); // undefined
    console.log(percentageBars); // HTMLCollection[4] 
    percentageBars[0].style.width = "10%"; // cannot set a property 'width' of undefined

    for (var i = 0; i < percentageBars.item.length; i++) {
        percentageBars[i].style.width = "10%"; // cannot set a property 'width' of undefined
    }

and this is the HTML that I want to modify

<div>
<div class="item">
    <div class="inner-item">
        <h3 class="title" data-percent="95">International Business</h3>
        <div class="bar" data-percent="95">
            <div class="inner-bar derian"></div>
        </div>
    </div>
</div>
<div class="item">
    <div class="inner-item">
        <h3 class="title" data-percent="90">Maintenance Services</h3>
        <div class="bar" data-percent="90">
            <div class="inner-bar"></div>
        </div>
    </div>
</div>
<div class="item">
    <div class="inner-item">
        <h3 class="title" data-percent="85">Design Engineering</h3>
        <div class="bar" data-percent="85">
            <div class="inner-bar"></div>
        </div>
    </div>
</div>
<div class="item">
    <div class="inner-item">
        <h3 class="title" data-percent="80">General Supply</h3>
        <div class="bar" data-percent="80">
            <div class="inner-bar"></div>
        </div>
    </div>
</div>

But i always getting an error. But if I console.log(percentageBars) it show that there are 4 div but if I tried to modify one of them, it become undefined element

can someone explain me why this happen? and how to fix it? thanks