CODEWITHSUNDEEP
javascriptjson
Terry Milnes
Terry Milnes

Reputation: 7

Create dynamic radio button list using JS and JSON

I am trying to create a list of radio buttons using pure JS and a json with the data for the list, but cannot get it to work. It was displaying the radio buttons without any labels. Then I tried adding in the appendchild(t) bit and now it displays nothing. Here is what I have so far:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Add inventory item</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>

      <header>
          
      </header>

      <section>
          <form action="" id="input4radio">
      </section>

    <script>
    const header = document.querySelector('header');
    const section = document.querySelector('section');
    var inventoryItems = [{"itemID":0,"itemName":"Ammo"},{"itemID":1,"itemName":"Armor"},{"itemID":2,"itemName":"Good"},{"itemID":3,"itemName":"Potion"},{"itemID":4,"itemName":"Ring"},{"itemID":5,"itemName":"Rod"},{"itemID":6,"itemName":"Scroll"},{"itemID":7,"itemName":"Staff"},{"itemID":8,"itemName":"Wand"},{"itemID":9,"itemName":"Weapon"},{"itemID":10,"itemName":"Wondrous Item"}];
        function onLoad() {
        var form = document.getElementById('input4radio');
            for (itemName in inventoryItems) {
                var newRadio = document.createElement('input'); 
                newRadio.type = 'radio';
                newRadio.id = itemID;
                newRadio.value = itemName;
                var newLabel = document.createElement('label');
                var t = document.createTextNode(itemName);
                newLabel.setAttribute("for", itemName);
                form.appendChild(newRadio); 
                form.appendChild(t)
                form.appendChild(document.createElement('br'));
            }

        }

        window.onload = onLoad;
    </script>
  </body>
</html>

Upvotes: 0

Views: 1407

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22320

the most easy way to do that
(you also wrongly use for (... in ... ) instead of for (... of ...)
otherwise it is not logical the names of radio buttons of the same group must not be identical

so you better will do :

const
  form            = document.querySelector('#input4radio')
, selectedItemChx =  document.querySelector('#selectedItem > em')
  ;

const inventoryItems = 
  [ { "itemID": 0,  "itemName": "Ammo"          } 
  , { "itemID": 1,  "itemName": "Armor"         } 
  , { "itemID": 2,  "itemName": "Good"          } 
  , { "itemID": 3,  "itemName": "Potion"        } 
  , { "itemID": 4,  "itemName": "Ring"          } 
  , { "itemID": 5,  "itemName": "Rod"           } 
  , { "itemID": 6,  "itemName": "Scroll"        } 
  , { "itemID": 7,  "itemName": "Staff"         } 
  , { "itemID": 8,  "itemName": "Wand"          } 
  , { "itemID": 9,  "itemName": "Weapon"        } 
  , { "itemID": 10, "itemName": "Wondrous Item" } 
  ];     

for (item of inventoryItems) 
  {
  let newLabel = document.createElement('label');
  newLabel.innerHTML = `
    <input type="radio" name="inventoryItems" value="${item.itemID}"> 
    ${item.itemName}`

  form.appendChild(newLabel); 
  }
form.oninput = e =>
  {
  selectedItemChx.textContent = form.inventoryItems.value
    + ' --> '
    + inventoryItems.find(x=>x.itemID==form.inventoryItems.value).itemName
  }
#input4radio > label {
  display : block;
  margin  : .5em 1em; 
  cursor  : pointer;
  }
<form action="" id="input4radio"></form>

<p id=selectedItem> selected item : <em></em></p>

please also note the label usage without the for attribute

Upvotes: 1

Hirak Sheth
Hirak Sheth

Reputation: 359

I have found that you were accessing array variables wrongly. I have corrected it in below.

<html>
  <head>
    <meta charset="utf-8">

    <title>Add inventory item</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>

      <header>
          
      </header>

      <section>
          <form action="" id="input4radio">
      </section>

    <script>
    const header = document.querySelector('header');
    const section = document.querySelector('section');
    var inventoryItems = [{"itemID":0,"itemName":"Ammo"},{"itemID":1,"itemName":"Armor"},{"itemID":2,"itemName":"Good"},{"itemID":3,"itemName":"Potion"},{"itemID":4,"itemName":"Ring"},{"itemID":5,"itemName":"Rod"},{"itemID":6,"itemName":"Scroll"},{"itemID":7,"itemName":"Staff"},{"itemID":8,"itemName":"Wand"},{"itemID":9,"itemName":"Weapon"},{"itemID":10,"itemName":"Wondrous Item"}];
        function onLoad() {
        var form = document.getElementById('input4radio');
            for (var i=0;i<inventoryItems.length;i++) {
                itemName = inventoryItems[i];
                var newRadio = document.createElement('input'); 
                newRadio.type = 'radio';
                newRadio.id = itemName.itemID;
                newRadio.name = "radios";
                newRadio.value = itemName.itemName;
                var newLabel = document.createElement('label');
                var t = document.createTextNode(itemName.itemName);
                newLabel.setAttribute("for", itemName.itemID);
                form.appendChild(newRadio); 
                form.appendChild(t)
                form.appendChild(document.createElement('br'));
            }

        }

        window.onload = onLoad;
    </script>
  </body>
</html>

Upvotes: 0

Related Questions