How to resolve the uncaught typeerror cannot read property style of null?
I am trying to copy this from Code pen into my Visual Force Page: I added everything accordingly and the function of the Javascript is being called upon load from the Apex controller but the Progress bar is not working and when I See the console log I see a number of error regarding CSS and it is not being able to find the CSS classes. Here is my code:
[removed]
function progressBar(progressVal,totalPercentageVal = 100) {
alert(JSON.stringify(totalPercentageVal));
var strokeVal = (4.64 * 100) / totalPercentageVal;
var x = document.querySelector('.progress-circle-prog');
x.style.strokeDasharray = progressVal * (strokeVal) + ' 999';
var el = document.querySelector('.progress-text');
var from = $('.progress-text').data('progress');
alert(JSON.stringify(el));
$('.progress-text').data('progress', progressVal);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / 800;
el[removed] = progressVal / totalPercentageVal * 100 + '%';
if (progress < 1> }, 10);
}
[removed]
<style type="text/css">
.progress {
position: absolute;
height: 160px;
width: 160px;
cursor: pointer;
top: 50%;
left: 50%;
margin: -80px 0 0 -80px;
}
.progress-circle {
transform: rotate(-90deg);
margin-top: -40px;
}
.progress-circle-back {
fill: none;
stroke: #D2D2D2;
stroke-width:10px;
}
.progress-circle-prog {
fill: none;
stroke: #7E3451;
stroke-width: 10px;
stroke-dasharray: 0 999;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.7s linear 0s;
}
.progress-text {
width: 100%;
position: absolute;
top: 60px;
text-align: centre;
font-size: 2em;
}
</style>
<svg class="progress-circle" width="200px" height="200px">
cx="80" cy="80" r="74">
cx="80" cy="80" r="74">
</svg>
All I am getting is this:
when I look at the console I see the following Errors :
But as you can see in my Styles there is a Style class named: .progress-circle-prog but for some reason, it's not able to find it. Is this something to do with Salesforce?
To resolve the uncaught typeerror cannot read property style of null - I see you declare your [removed] tag before html body. If you directly call a script tag it starts executing immediately. So by the time script tag crawls the document using document.querySelector('.progress-circle-prog'); this might not be available. Also I don't see query being imported, hoping that you missed adding in above code, but it's there in your code in your org.
So if you do this.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.progress {
position: absolute;
height: 160px;
width: 160px;
cursor: pointer;
top: 50%;
left: 50%;
margin: -80px 0 0 -80px;
}
.progress-circle {
transform: rotate(-90deg);
margin-top: -40px;
}
.progress-circle-back {
fill: none;
stroke: #D2D2D2;
stroke-width:10px;
}
.progress-circle-prog {
fill: none;
stroke: #7E3451;
stroke-width: 10px;
stroke-dasharray: 0 999;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.7s linear 0s;
}
.progress-text {
width: 100%;
position: absolute;
top: 60px;
text-align: centre;
font-size: 2em;
}
[removed]
function progressBar(progressVal,totalPercentageVal = 100) {
var strokeVal = (4.64 * 100) / totalPercentageVal;
var x = document.querySelector('.progress-circle-prog');
x.style.strokeDasharray = progressVal * (strokeVal) + ' 999';
var el = document.querySelector('.progress-text');
var from = $('.progress-text').data('progress');
$('.progress-text').data('progress', progressVal);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / 700;
el[removed] = progressVal / totalPercentageVal * 100 + '%';
if (progress < 1>Then the html body will load first, then the script tag and then it will show the loading screen as per codepen.