trying to make for loop for buttons without jquery

Question

Hey guys at the moment i am trying to make a for loop to create some buttons in my html dont think about the alt.on function cause it is based on altv(GTA 5 Multiplayer Servers). I am getting from somewhere else the data of applist and with that data i am trying to make the buttons in a for loop the thing is that i want this buttons to be childs of a div that already exists with a classname in the html and i need to definde a onClick = "blafunction();" for the each button.

alt.on('data-from-server', (applist) => {
      let app = JSON.parse(applist);
      for (i = 0; i < app.length; i++) {
           var button = document.createElement("button");
           button.id = app.id;
           document.body.appendChild(button);
      };
});

Hi @MisterLA you might want to check out dynamically adding click event listeners. For example this post may be relevent: stackoverflow.com/questions/5040069/… — Michael Sorensen
– Michael Sorensen, Commented Feb 26, 2020 at 0:29
You don't want to use the same id value for multiple elements on a page. Other than that, it looks like you're doing it right. Since you're already writing JavaScript, I'd suggest using button.addEventListener("click", blafunction) -- or better yet, just add one click listener to the document and decide how it should behave based on which element was clicked. (When you define blafunction, you would just say function blafunction(event){ const thingThatWasClicked = event.target; ... }). — Cat
– Cat, Commented Feb 26, 2020 at 0:34

Miaplacidus · Accepted Answer · 2020-02-26 00:33:08Z

0

Assuming the data returned from the server is an array containing objects describing various apps...

applist = [
  {
    id: 235235,
    name: 'App 1',
  },
  {
    id: 464573,
    name: 'App 2',
  },
  {
    id: 98783246,
    name: 'App 3',
  },
]

You can do something like this...

const buttonClick = (event) => {}
alt.on('data-from-server', (applist) => {
  let app = JSON.parse(applist);
  const nav = document.querySelector('nav.button-list')
  for (i = 0; i < app.length; i++) {
    let button = document.createElement('button')
    let id = app[i].id
    let name = app[i].name
    button.setAttribute('id', id)
    button.innerHTML = name
    button.addEventListener('click', buttonClick)
    nav.appendChild(button)
  }
})

With this HTML...

<body>
  <nav class="button-list"></nav>
</body>

answered Feb 26, 2020 at 0:33

Miaplacidus

5453 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MisterLA Over a year ago

but can you explain mit why app[i].id? I mean why the [i]

Sifat Haque · Accepted Answer · 2020-02-26 00:50:23Z

You can use addEventListener to add a click handler to your dynamically added buttons.

alt.on('data-from-server', (applist) => {
  let app = JSON.parse(applist);
  const fragment = document.createDocumentFragment();
  const handleClick = (e) => {
    console.log(e.target.id);
  }
  for (i = 0; i < app.length; i++) {
       const button = document.createElement("button");
       button.id = app.id;
       button.addEventListener('click', handleClick);
       fragment.appendChild(button);
  };
  document.body.appendChild(fragment);
});

DEMO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <script>
    const body = document.querySelector('body');
    const fragment = document.createDocumentFragment();
    const handleClick = (e) => {
      console.log(e.target.id);
    }
    for(let i = 0; i < 5; i++) {
      const button = document.createElement('button');
      button.innerText = `${i}`;
      button.id = `${i}`;
      button.addEventListener('click', handleClick);
      fragment.appendChild(button);
    }
    body.appendChild(fragment);
       
       
  </script>
</body>
</html>

Collectives™ on Stack Overflow

trying to make for loop for buttons without jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related