I'm drawing data in a JS canvas. I need to enter the veritcal and horizontal axis values at fix intervals.
I would ask how to create an array of paragraph or text to assign an absolute coordinate and the right axis value to draw them around the canvas.
currently I created and edited line by line:
document.getElementById('percent0').innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
a = minVal+(maxVal-minVal)*0.25;
document.getElementById('percent25').innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
a = minVal+(maxVal-minVal)*0.5;
document.getElementById('percent50').innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
a = minVal+(maxVal-minVal)*0.75;
document.getElementById('percent75').innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
a = minVal+(maxVal-minVal)*1;
document.getElementById('percent100').innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
but I would like to use a smart way to do it with array if possible.
thks.
Just add mark values to array and use it where it changes:
const marks = [0, 25, 50, 75, 100};
marks.forEach(mark => {
const a = minVal+(maxVal-minVal)*mark / 100.0;
document.getElementById('percent' + mark).innerHTML =
a.toFixed(5-Math.round(Math.log10(a)));
});
If you want to create those html elements with code too you can simple have something like <div id="marks-container;></div> in your HTML and then add all paragraps with JS too -
const p = document.createElement('p');
p.id = "percent" + mark;
document.querySelector("#marks-container").appendChild(p);