Changing the CSS 'order' attribute of div elements using javascript

What I’m currently trying to do is create a simple config file which manipulates elements in the HTML document.

I’ve managed to hide/show buttons, but what I’m now trying to do is change the “order” of the elements.
If I change the order value in the CSS document that works fine, but when I try to do this through Javascript I cant get it to work. Does anybody know what I may be doing wrong?

Heres my Javascript code:

function loadConfig(){
  const buttons= [
      "id": "btn1",
      "enabled": true,
      "order" : 2
      "id": "btn2",
      "enabled": true,
      "order" : 1

const btnOrderId = buttons.filter(
      return button.order > 0;
  // output Array of Ids
  // ["btn1", "btn2"] 

  const btnOrderNum = buttons.filter(
      return button.order > 0
  // [2,1]

 const i = 0
    function(idname){ // btn1 btn2
      document.getElementById(idname).style.order = btnOrderNum[i]; // here we are accessing the Ids of each button in the css document.

Heres my CSS code:

#btn1 {
    order: 1;
#btn2 {
    order: 2;   


JS isn;t my thing but I think you need .order on the end here like this:.

document.getElementById(idname).style.order = btnOrderNum[i].order;

You also have a bracket the wrong way around.



Instead of



Also the variable i shouldn’t be a constant as you are changing it.

I suggest the JavaScript can be simplified . . .


Dude thank you, works perfectly! :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.