how solve problem of a radio in javascript?

Question

I want user to choice one from each of the two radio buttons and this change the variable to display by button function.

How can I achieve this?

So far I have done the following -

 function ok() { if (document.getElementById("vanilla").checked = true;) var flavor = "vanilla"; if (document.getElementById("chocolate").checked = true;) var flavor = "chocolate"; if (document.getElementById("cone").checked = true;) var vessel = "cone"; if (document.getElementById("bowl").checked = true;) var vessel = "bowl"; if (document.getElementById("sprinkles").checked = true;) var toppings = "sprinkles"; if (document.getElementById("peanuts").checked = true;) var toppings = "peanuts"; document.getElementById("par").innerHTML = "I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + "." }

 <h1>choice your Ice Cream</h1> <div> <h4>Please select a flavor:</h4> <input type="radio" id="vanilla" name="flavor" value="vanilla"> <label for="vanilla">vanilla</label><br> <input type="radio" id="chocolate" name="flavor" value="chocolate"> <label for="chocolate">chocolate</label> <br> <h4>Please select a vessel:</h4> <input type="radio" id="cone" name="vessel" value="cone"> <label for="cone">cone</label><br> <input type="radio" id="bowl" name="vessel" value="bowl"> <label for="bowl">bowl</label> <br> <h4>Please select a toppings:</h4> <input type="radio" id="sprinkles" name="toppings" value="sprinkles"> <label for="sprinkles">sprinkles</label><br> <input type="radio" id="peanuts" name="toppings" value="peanuts"> <label for="peanuts">peanuts</label> <p id="par"></p> <button onClick="ok()">ok</button> </div>

Answer 1

Try this:

 function ok() { var flavor = document.querySelector("[name='flavor']:checked").value; var vessel = document.querySelector("[name='vessel']:checked").value; var toppings = document.querySelector("[name='toppings']:checked").value; document.getElementById("par").innerHTML = "I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + "." }

 <h1>choice your Ice Cream</h1> <div> <h4>Please select a flavor:</h4> <input type="radio" id="vanilla" name="flavor" value="vanilla"> <label for="vanilla">vanilla</label><br> <input type="radio" id="chocolate" name="flavor" value="chocolate"> <label for="chocolate">chocolate</label> <br> <h4>Please select a vessel:</h4> <input type="radio" id="cone" name="vessel" value="cone"> <label for="cone">cone</label><br> <input type="radio" id="bowl" name="vessel" value="bowl"> <label for="bowl">bowl</label> <br> <h4>Please select a toppings:</h4> <input type="radio" id="sprinkles" name="toppings" value="sprinkles"> <label for="sprinkles">sprinkles</label><br> <input type="radio" id="peanuts" name="toppings" value="peanuts"> <label for="peanuts">peanuts</label> <p id="par"></p> <button onClick="ok()">ok</button> </div>