How to get a each value by using array with java script?

Question

I'd like to get a each value from a array, when I select or check each only I want to get a value. But there are some error, and I have no idea how to fix it. What do I fix it to work well this? Please let me know. Thanks

var pzArray = [];

function pizzaOrder() {
  var orderList = {
    pizzaName:"",
    size:"",
    topping:""
  };

  orderList.pizzaName = document.getElementById("pzName").value;
  orderList.size = document.getElementByName("pzSize").value;
  orderList.topping = document.getElementById("topping").checked;

  pzArray.push(orderList);

  for (var i = 0; i<pzArray.length; i++) {
    var pizza = pzArray[i];
    invoice = pizza.size + pizza.pizzaName + pizza.topping;
    totalInvoice += invoice + "<br>"
  }
  document.getElementById("showList").innerHTML = totalInvoice;
}

   <body>

<div>

    <input type=radio id="pzName" name=pzSelect value="A">a
    <input type=radio id="pzName" name=pzSelect value="B">b
    <input type=radio id="pzName" name=pzSelect value="C">c

    <br><br>

    <select>
        <option name="pzSize" id="small" value="Small">S
        <option name="pzSize" id="medium" value="Medium">M
        <option name="pzSize" id="large" value="Large">L
    </select>

    <br><br>

    <input type="checkbox" id="topping" name="ExtraCheese" value="Extra Cheese">XtraC
    <input type="checkbox" id="topping" name="Pepperoni" value="Pepperoni">P
    <input type="checkbox" id="topping" name="Mushrooms" value="Mushrooms">M

    <br><br>

    <input type=button value="Order Description" onClick="pizzaOrder()" />

</div>

<span id="showlist"><span></span>


</body>

@Teemu I edited my code, you can know the error of this code. Thanks. — JayXD
– JayXD, Commented Mar 28, 2020 at 10:10
@Supercool. Thanks. I just missed it. But that was not a big problem. — JayXD
– JayXD, Commented Mar 28, 2020 at 10:12
@Teemu. Yep, that was just my mistake. But there are another problem. — JayXD
– JayXD, Commented Mar 28, 2020 at 10:14

M A Salman · Accepted Answer · 2020-03-28 10:40:22Z

There were couple of errors not setting name in string you were setting name=pizSelect instead of name="pizSelect" ,typing mistakes in ids , not initializing the totalInvoice with var or let and missing condition in forloop i<pzArray.length.

As for radio buttons you can do document.querySelector("input[name=pzSelect]:checked").value to get the value

var pzArray = [];
function pizzaOrder() {
 document.getElementById("showlist").innerHTML
  var orderList = {
    pizzaName:"",
    size:"",
    topping:""
  };
  orderList.pizzaName = document.querySelector("input[name=pzSelect]:checked").value;
  orderList.size = document.getElementById("psize").value;
  let toppings=document.querySelectorAll("input[name=topping]:checked");
  toppings.forEach( (topping)=> orderList.topping+=topping.value+"," ) ;
  let totalInvoice="";
  pzArray.push(orderList);
  for (let i = 0; i< pzArray.length; i++) {
    let pizza = pzArray[i];
    invoice = `Order number : ${i+1} ${pizza.size} ${pizza.pizzaName} with ${pizza.topping}`;
    totalInvoice += invoice + "<br>"
  }
  document.getElementById("showlist").innerHTML = totalInvoice;
}

<h4>Order Pizza</h4>
<div>
    <!-- in your code you have not included pzSelect in " " -->
    <input type=radio id="pzName" name="pzSelect" value="Chicago">Chicago Pizza
    <input type=radio id="pzName" name="pzSelect" value="Sicilian">Sicilian Pizza
    <input type=radio id="pzName" name="pzSelect" value="Detroit">Detroit
Pizza    <br><br>
    Size
    <select id="psize">
        <option name="pzSize" id="small" value="Small">Small
        <option name="pzSize" id="medium" value="Medium">Medium
        <option name="pzSize" id="large" value="Large">Large
    </select>

    <br><br>

    <input type="checkbox" id="topping" name="topping" value="Extra Cheese">XtraC
    <input type="checkbox" id="topping" name="topping" value="Pepperoni">Pepporni
    <input type="checkbox" id="topping" name="topping" value="Mushrooms">Mushrooms

    <br><br>

    <input type=button value="Order Description" onClick="pizzaOrder()" />

</div>

<span id="showlist"><span>

Uchendu · Accepted Answer · 2020-03-29 08:48:45Z

2

Initialize your orderList object properly. Either first as an empty object:

var orderList = {};
// then adding the attributes
orderList.pizzaName = document.getElementById("pzName").value;
orderList.size = document.getElementByName("pzSize").value;
orderList.topping = document.getElementById("topping").checked;

or by directly initializing the objects attributes

var orderList = {
    pizzaName = document.getElementById("pzName").value,
    size = document.getElementByName("pzSize").value,
    topping = document.getElementById("topping").checked
}

edited Mar 29, 2020 at 8:48

answered Mar 28, 2020 at 10:15

Uchendu

1,06612 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get a each value by using array with java script?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related