RustyIngles RustyIngles - 4 months ago 20
Javascript Question

addEventListener not working when used within addClass

I have written the following HTML, using Material Design Lite for a progress bar:

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
<div id="stepProgress" class="mdl-progress mdl-js-progress"></div>
</div>
</div>
<div class="mdl-grid">
<div id="step1-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
<h5 class="text-center">Step 1</h5>
</div>
<div id="step2-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
<h5 class="text-center">Step 2</h5>
</div>
<div id="step3-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
<h5 class="text-center">Step 3</h5>
</div>
</div>

<div id="firstnext" class="box-style">Next</div>


Tha layout looks great. When a button is pressed it changes the background on each of the steps to indicate which step the user is in, using the following jQuery:

jQuery('#step1-title').addClass('box-active');
jQuery('#firstnext,#step2-title').click(function(){

jQuery('#step1').hide();
jQuery('#step2').show();
jQuery('#step3').hide();
jQuery('#step1-title').removeClass('box-active');
jQuery('#step2-title').addClass('box-active');
jQuery('#step3-title').removeClass('box-active');

});


I am now trying to update the progress bar but the following isn't working when the next button is pressed:

document.querySelector('#stepProgress').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(33);
});


(from Google's site here: https://getmdl.io/components/#loading-section)

I've created the following jsFiddle https://jsfiddle.net/storm/7a84vqz7/

Answer

The example code on the provided link, reacts to the mdl-componentupgraded event, assuming that some background process updates the component. Although I don't know the underlying workings, it seems you can set set the progress directly via:

document.querySelector('#stepProgress').MaterialProgress.setProgress(33);
Comments