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: https://stackoverflow.com/questions/5040069/javascript-dynamically-assign-onclick-event-in-the-loop — Michael Sorensen, Feb 26 '20 at 00: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, Feb 26 '20 at 00:34

score 0 · Answer 1 · answered Feb 26 '20 at 00:33

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>

but can you explain mit why app[i].id? I mean why the [i] – MisterLA Feb 26 '20 at 00:59 — MisterLA, Feb 26 '20 at 00:59

score 0 · Answer 2 · answered Feb 26 '20 at 00:50

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>

trying to make for loop for buttons without jquery

2 Answers2