in javascript i'm making a quiz. answers are displayed by a vertical bar chart. I draw this chart in javascript by using a fixedvalue and multiplying it with the input of the range objects.
The problem with this is that it doesn't recognize the width of the browser or translate to mobile at all. How can i request the screen width? and make it so that the graph stays neat within the browser Thank you for your help !, pls elaborate a little bit as i am new to javascript
ranges.forEach((range) => {
const rangeVal = parseInt(document.getElementById(range).value);
result += rangeVal; // add value to counter
var chart1value;
var fixedValue = 100
var barWidth1 = document.querySelector("#bar-one");
chart1value = result;
chart1value = chart1value * fixedValue;
document.getElementById('bar-one').value = chart1value;
barWidth1.style.width = chart1value + "px";
});
Update :
so i've requested Browser width of the screen with jquery. but it's a static width. Does anybody know if this
var width = $(window).width();
ranges.forEach((range) => {
const rangeVal = parseInt(document.getElementById(range).value);
result += rangeVal; // add value to counter
var chart1value;
// var fixedValue = 100
var barWidth1 = document.querySelector("#bar-one");
chart1value = result;
chart1value = chart1value * width * 0.9 / 10;
document.getElementById('bar-one').value = chart1value;
barWidth1.style.width = chart1value + "px";
});