CODEWITHSUNDEEP
javascripthtmlcss
ahmedashouryounes
ahmedashouryounes

Reputation: 21

how solve problem of a radio in javascript?

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>

Upvotes: 1

Views: 49

Answers (1)

Jes&#250;s Dom&#237;nguez
Jes&#250;s Dom&#237;nguez

Reputation: 414

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>

Upvotes: 1

Related Questions