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

JavaScript
1

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(
    function(button){
      return button.order > 0;
    }
  ).map(function(button){
    return button.id
  })
  // output Array of Ids
  // ["btn1", "btn2"] 


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

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

Heres my CSS code:

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

Thankyou!

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.

[

const

Instead of

]

const

https://codepen.io/paulobrien/pen/yLpgzXo

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

3

I suggest the JavaScript can be simplified . . .

2 Likes
4

Dude thank you, works perfectly! :slight_smile:

1 Like
5

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