I'm currently facing an issue with calling the event listener for all 4 progress bars on my page. The problem is that it's only working on the first progress bar. I cloned the div with the id of 'mycontainer' using a for loop, but the event listener seems to only recognize the first progress bar and not the rest. Here is the relevant code snippet:
</head>
<body >
<div id="headdiv">
<div id="mycontainer" style="width: auto;float: left;margin-left: 2%;">
<input
id="threshold"
placeholder="threshold value"
type="text"
name="thresholdd"
style="width: 120px; margin-top: 30px;margin-left: 0%; padding: 10px;" />
<input
id="live"
placeholder="live value"
type="text"
name="livee"
style="width: 120px; margin-bottom: 20px;padding: 10px;" />
<div id="progress-container" class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
</div>
</div>
</body>
<script>
const progressBar = window.document.getElementById("progress-bar");
const progressContainer = window.document.getElementById( "progress-container");
const threshold = window.document.getElementById("threshold");
let thresholdValue, value;
threshold.addEventListener("change", e => { thresholdValue = e.target.value;});
live.addEventListener("change", e => {
value = e.target.value;
let percentValue = Math.floor((value / (2 * thresholdValue)) * 100);
let percentMargin = Math.floor((25 * value) / 100);
console.log(percentValue, percentMargin);
if ( value < 100) {
progressBar.style.height = `calc(${value}% - ${percentMargin}px)`;
} else if (value => 100) {
progressBar.style.height = `calc(100% - 25px)`;
} else {
progressBar.style.height = `0px`;
}
if (percentValue < 50) {
progressBar.style.backgroundColor = "red";
progressContainer.style.borderColor = "red";
} else {
progressBar.style.backgroundColor = "green";
progressContainer.style.borderColor = "green";
}
});
for(var i=0;i<4;i++)
{
var headdiv=document.getElementById('headdiv');
var elem = document.querySelector('#mycontainer');
var clone = elem.cloneNode(true);
clone.id = 'mycontainer'+i;
headdiv.appendChild(clone);
}
</script>
</html>