Как вывести ширину дочернего элемента в процентах?

Question

[Лина Литвак]

Суть задания состоит в том, что есть прогресс бар, в котором есть собственно сам процесс загрузки, где должен выводится уже загруженный процент. Поскольку все это только на уровне верстки, то задача состоит в том, чтобы вывести ширину дочернего элемента, как тот самый процент загрузки, который можно изменить при изменении самой ширины дочернего элемента. Возможно вопрос тупой, но второй день не доходит, как же именно вывести ширину дочернего элемента. Поскольку по ходу написания кода выводиться ширина только родителя в пикселях, а если обратится к родителю через lastChild.clientWidth - то выходит undеfinеd.
Подскажите, пожалуйста, что здесь не так, и может есть толковая документация, как это делать на чистом JS без jQuery?

<form class="upload-box">
            <p class="upload-text" id="numProgress"></p>
            <div class="progress-box">
                <div class="progress-track"></div>
                <div class="progress-percent"></div>
            </div>
            <p class="upload-desc">Please wait...</p>
            <button class="upload-btn-cancel upload-btn-cancel--margin-top">Cancel</button>
        </form>

.progress-box{
    position: relative;
    height: 6px;
    width: 183px;
}
.progress-track{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    margin-top: 17px;
    background-color: #E0E0E0FF;
}
.progress-percent{
    position: absolute;
    top: 17px;
    left: 0;
    height: 100%;
    width: 59%;
    border-radius: 10px;
    background-color: #18A0FBFF;
}

let progressBox = document.querySelector('.progress-box').lastChild.clientWidth; // undefined
        let progressPercent = document.querySelector('.progress-percent').clientWidth; //108px
        let numProgress = document.getElementById('numProgress');

        numProgress.innerHTML = progressPercent + '% uploaded';

Comments

[Ankhena]

Что-то тут не то.
% загрузки откуда прилетает, так?
Зачем его снова получать через ширину?

p.s. кстати, есть тег progress.
Если он не подходит по какой-то темной причине, то для своего прогресса в большинстве случаев достаточно одного div и градиента либо псевдоэлемента для цвета.

[Лина Литвак]

Ankhena, процент загрузки я хотела вывести как ширину дочернего элемента, которая в процентах прописана относительно родителя, у которого 183px ширина. Но как раз таки, если через innerHTML вывожу, то появляется та самая ширина родителя
Сейчас выходит так, если ширина ребенка 100% относительно родителя, то соответственно, на экран выводиться ширина родителя, которая в px. В случае такого кода? пытаясь получить через родителя ширину ребенка - выходит undefined.

let progressBox = document.querySelector('.progress-track').firstChild.clientWidth; // undefined

Я делаю родитель - ребенок, а не через псевдо, потому что на сколько знаю, что псевдоэлементы не есть частью DOM структуры.

Но я тогда буду пробовать с другой стороны подойти к решению, может еще выясню, в чем тут кроется проблема) Спасибо за ответ))

[Ankhena]

Лина Литвак, вы не поняли о чем я.

Этот процент - это дано. Его вообще не нужно вычислять.

Вам прилетает загружено 63%.
Всё, их и используете.

[Лина Литвак]

Ankhena, Вы правы, все сделано. Понадобилось время, чтобы более детально разобраться)
Спасибо!

Answer 1

[Антон Антон]

https://jsfiddle.net/3n9Loath/5/
можно вообще одним элементом и градиентом в бэкграунде развлечься, но мне лень.

Comments

[Лина Литвак]

спасибо, попробую переделать так, если не решу ничего с шириной!) но тем не менее, так и остается открыт вопрос, почему не получается извлекать ширину дочернего элемента