Где ошибка в коде на JS?

Question

[Kryptonit]

Нужно вывести условный уровень скилла. в span я ввожу цифру (в процентах), а JS код в высчитывает длину закрашенной линии в пикселях. Кто бы мог подумать: ничего не работает.

HTML

<div class="skills">
            <div class="wp sociate">
                <span class="soc_name">Wordpress</span><div class="gr_line"></div><span class="percents"><span class="per1">85</span>%</span>
            </div>
            <div class="php sociate">
                <span class="soc_name">php</span><div class="gr_line"></div><span class="percents"><span class="per1">70</span>%</span>
            </div>
            <div class="photoshop sociate">
                <span class="soc_name">photoshop</span><div class="gr_line"></div><span class="percents"><span class="per1">80</span>%</span>
            </div>
            <div class="js sociate">
                <span class="soc_name">JavaScript</span><div class="gr_line"></div><span class="percents"><span class="per1">60</span>%</span>
            </div>
            <div class="html sociate">
                <span class="soc_name">HTML & CSS</span><div class="gr_line"></div><span class="percents"><span class="per1">90</span>%</span>
        </div>
        </div>

JS

document.addEventListener('DOMContentLoaded', function(){
    let line = document.querySelectorAll('.per1').values;
    let meniaem = document.querySelectorAll('.gr_line');
    let wid = 520;
   
    for(let i=0; i<line.length; i++){
        let realline = line[i]/100;
        let pxline = realline*wid;
        meniaem[i].style.width = `${pxline}px`;
    }
  
});

.skills{
        width: 800px;
        display: flex;
        flex-direction: column;
        height: 450px;
        .wp{}
    }

.gr_line{
    height: 20px;
    background-color: $f3;
    border-radius: 3px;
}
.soc_name, .percents{
    text-transform: uppercase;
    display: flex;
    align-items: center;
    min-width: 120px;
    justify-content: flex-end;
    color: $c4;
    font-size: 14px;
    font-family: $f1;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-right: 20px;
}
.percents{
    margin: 0 0 0 20px;
    justify-content: flex-start;
}
.sociate{
    height: 50px;
    display: flex;
    font-display: row;
}

Answer 1

[Андрей Пастухов]

let line = document.querySelectorAll('.per1');
let meniaem = document.querySelectorAll('.gr_line');
let wid = 520;

for(let i=0; i<line.length; i++){
  let realline = line[i].textContent/100;
  console.log({ realline })
  let pxline = realline*wid;
  meniaem[i].style.width = `${pxline}px`;
}

Comments

[Kryptonit]

спасибо, зачем нужен console.dir?

[Андрей Пастухов]

Он не нужен, он для дебага