Setting CSS width of HTML <td> element through JavaScript

Question

I'm trying to make a progress-bar for each "td" element in a HTML table. The table itself is generated through JavaScript, currently with random placeholder values. I would like each progress-bar to show it's relative percentage to the highest randomly generated value. Please see the image below:

Currently what I have done is this:

// GAMES PLAYED
const games = Math.floor(Math.random() * 100);
const td2 = document.createElement("td");
td2.textContent = games;
td2.innerHTML = games + '<div class="progress-bar"><div class="filled-progress-bar"></div>'
tr.appendChild(td2);

I generate two "div"s, where the grey one you see in the 3rd image is the ".progress-bar", and the other one that is filled with green is the ".filled-progress-bar". I then try to set the width of the ".filled-progress-bar" to this:

// Iterate each sorted rows and add the correct amount of fill
// Get the lowest and highest value of the sorted row
const progressBarFirstValue = sortedRows[0].cells[column].textContent;
const progressBarSecondValue = sortedRows[sortedRows.length-1].cells[column].textContent;

const progressBarMaxValue = (progressBarFirstValue > progressBarSecondValue) ? progressBarFirstValue : progressBarSecondValue;

sortedRows.forEach(function (row) {
    const currentTdElement = row.cells[column];
    tdValue = currentTdElement.textContent;
    
    percentageOfMaxValue = tdValue / progressBarMaxValue * 100;

    currentTdElement.style.width = "percentageOfMaxValue%";
});

I would like to highlight the last line, where I use the.style.width command:

currentTdElement.style.width = "percentageOfMaxValue%";

This works if I manually insert it into my.css file, but it appears not to work when generated through my JavaScript file above. Is there any chance that some of you can see where I go wrong? Thank you so much for your time!

Answer 1

I fixed it somehow myself with some trial and error. I changed the innerHTML content of the "td" element in the table to this:

    td2.innerHTML = games + '<div class="progress-bar"></div><div class="filled-progress-bar"></div>';

And then when trying to calculate the "fill" for the progressbar I did this:

   const progressBarFirstValue = sortedRows[0].cells[column].textContent;
const progressBarSecondValue = sortedRows[sortedRows.length - 1].cells[column].textContent;

const progressBarMaxValue = (progressBarFirstValue > progressBarSecondValue) ? progressBarFirstValue : progressBarSecondValue;

sortedRows.forEach(function (row) {
    const currentTdElement = row.cells[column];
    tdValue = currentTdElement.textContent;
    percentageOfMaxValue = tdValue / progressBarMaxValue * 100;

    stringValue = percentageOfMaxValue.toString();
    
    currentTdElement.childNodes[2].style.width = stringValue + "%";


});

I think my issue was partly that in my original code, I couldnt access the ".filled.progress.bar" because it was nested inside the ".progress.bar" class, and my syntax didnt properly extract this div element. Secondly, the formating of the "percentageOfMaxValue" was not done right, but the solution above seems to have fixed it.