在模板文字中设置 div 样式？

Question

i have this api data coming from a server and i wanna dynamically render the data based on each response. problem occurs when i am trying to change the style of the div

say i have this div container with 4 child element

 <div class ='parent'> <div id = 'child_1'></div> <div id = 'child_2'></div> <div id = 'child_3'></div> <div id = 'child_4'></div> </div>

here is the css

 body { padding: 2em; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1em; grid-auto-rows: minmax(395px, auto); height: 100vh; } .grand_parent { width: 15em; height: 15em; border: 1px solid black; display: flex; justify-content: center; align-items: center; } .parent { width: 10em; height: 10em; border: 2px solid black; /* display: flex; justify-content: center; align-items: center; flex-direction: column; */ position: relative; } .parent > div { background-color: green; width: 2em; height: 2.3em; border: 1px solid black; }

Here is the js with just one chunk of data

 const data = [59.18, 70.39, 77.8, 60.43, 57.09, 53.59, 47.66, 61.3, 47.64, 55.45, 43.57, 72.31, 54.03, 63.32, 52.37, 45.14, 53.2, 48.16, 51.13, 45.34]; const dataOne = data[1]; console.log(data); // childOne.style.width = '60%'; const markup = data.map(el =>{ return ` <div class = 'grand_parent'> <div class ='parent'> <div id = 'child_1' style='width:${el};'></div> <div id = 'child_2'></div> <div id = 'child_3'></div> <div id = 'child_4'></div> </div> </div> ` } ) document.body.insertAdjacentHTML('afterbegin',markup);

i have been trying as much techniques as i have in my newbie vault,here are the ones so far

 let childOne = document.getElementById('child_1'); childOne.style.width= `${data}%`;

if i do this nothing happens :S

another one to check -

 let childOne = document.getElementById('child_1'); childOne.style.width= `${dataOne}%`; //This only applies to the first div and rests have no idea about this code

I am trying to do this with just pure vanilla Js here.any other ways to render such progress bar is highly appreciated. :)

Answer 1

Well,basically i could put this as an inline styling like this..

<div id = 'child_1' style='width:${el}%;'></div>

This one silly missed unit symbol took 2 days out of my project. but feels good as i was able to learn a great deal trying to figure out things own my own.