get numbers from string and insert into css

Question

I'm working on a javascript function to use on a dev platform called Intrexx. It has its own limitations, but I believe the below code should work. It is supposed to get then numbers inside an array, calculate a percentage according to what it finds and return that percentage to set the width of the progress bar. Everything works as intended, except the altering of the design part. Any ideas why?

function progressBar(){
// get text of navigation (eg: 3 of 28) 
var textProgress = document.getElementById('ID_navigationinfocontrolAB63A4D8').firstElementChild.innerHTML

// get numbers inside above string as array
var a = textProgress.match(/\d+/g).map(Number)

// take numbers in array, calculate percentage of progress, return int
var progressPercentage = parseInt((a[0]*100)/a[1])

// alter design of progress bar
var progressBarDesign = document.getElementById('ID_separatorcontrolC6F8BAC8').parentNode
progressBarDesign.style.width = progressPercentage +'% !important' }

I tried to edit the element directly, but neither this, nor editing the parentNode works.

Answer 1

finally managed to make it work with jQuery. I don't know why this works and my initial code didn't, but hopefully it will be of help to others. posting what is different from the first try

    // alter design of progress bar 
    var progressBarDesign = 
    document.getElementById('ID_separatorcontrolC6F8BAC8').parentNode

    // initialize below function
    setCss(progressBarDesign, 'width', progressPercentage + '%')
    }

    function setCss(oHtmlButton, cssKey, cssValue){
    $(oHtmlButton).css(cssKey, cssValue);
    }