Where is the error in the JS code?

Question

JavaScript

It is necessary to deduce the conditional skill level. in span I enter a number (as a percentage), and the JS code in calculates the length of the filled line in pixels. Who would have thought: nothing works.

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`;
}