1

I am new writing HTML code. I am playing with it, but I am having this problem. I create a page where user relect something from a radio choice and insert a value in another field. Af inserting a calculation is made based in the value selected in the radio menu choice and the value inserted in the second field. Later the user can reset the values and start again, but the reset is not cleaning the radio choice menu option.

<body>
<script type="text/javascript">
function calc() {
 var amount = document.getElementById("numberOfPeople").value;
 var amount = parseInt(amount, 10);
 var menu = document.getElementById("menu").value;
 if (menu == "Petra") {
   if (amount < 3) {
     var total = amount * 70;
   } 
   else if (amount >= 3 && amount < 7) 
   {
     var total = amount * 45;
   } 
   else 
   {
     var total = amount* 35; 
   }
 } 
 else if (menu == "Andalusia") 
 {
   if (amount < 3) {
     var total = amount * 80;
   } 
   else if (amount >= 3 && amount < 7) 
   {
     var total = amount * 55;
   } 
   else 
   {
     var total = amount* 40; 
   }
 } 
 else 
 {
   if (amount < 3) {
     var total = amount * 90;
   } 
   else if (amount >= 3 && amount < 7) 
   {
     var total = amount * 65;
   } 
   else 
   {
     var total = amount* 50; 
   }
 }    
 document.getElementById("total").value = total;  
}

</script>
<div id="calculatePrice"></div>
Choose your menu:
<form oninput="calc();">
 <input type="radio" id="menu" name="menu" value="Petra" >
 <label for="menu">Petra</label><br> 
 <input type="radio" id="menu" name="menu" value="Andalusia">
 <label for="menu">Andalusia</label><br> 
 <input type="radio" id="menu" name="menu" value="1001">
 <label for="menu">One thousand and one nights</label><br><br>

 <br>
 <label for="menu">The chosen menu was:</label><br>
 <output id="menu" name="menu"></output><br>
 <br>
 <label for="numberOfPeople">Specify the number of people:</label><br>
 <input type="number" id="numberOfPeople" name="numberOfPeople"><br><br>
 <label for="Total">Total price will be:</label><br><br>
 <output class="enMoney" id="total" name="total"></output><br><br>
 <input type="reset" value="Click here to Reset and choose another menu options" 
         style="background-color: red; 
         color: white" />
</form>
</body>

I am expecting some help in solving this issue.

João Pedro Alexandre
  • 23
  • 4
  • Please forget this thread, I found out that my problem was another. the 'menu' variable was always set with the ame value 'Petra' no matter what the user select. I changed the code by: var menu = document.querySelector('input[name="menu"]:checked').value; And I could also eliminate the reset button, it is not needed anymore. – João Pedro Alexandre Jan 22 '23 at 13:29

1 Answers1

0

You are using the same id on the radiobutton and in output. Id must be unique in the html document.

Something like:

<input type="radio" id="menuOption" name="menu" value="Petra" >
<label for="menuOption">Petra</label><br> 
<input type="radio" id="menuOption" name="menu" value="Andalusia">
<label for="menuOption">Andalusia</label><br> 
<input type="radio" id="menuOption" name="menu" value="1001">
<label for="menuOption">One thousand and one nights</label><br><br>

<label for="menuChosen">The chosen menu was:</label><br>
<output id="menuChosen" name="menu"></output><br>

You should also change the getElementById to match this changes.

Also, the input type "reset" won´t reset the radio buttons. You will have to hard code it. You can do something like this:

var resetButton = document.querySelector("input[type='reset']");
resetButton.addEventListener("click", function() {
  var radios = document.querySelectorAll("input[name='menu']");
  radios.forEach(function(radio) {
    radio.checked = false;
  });
});

This will loop through all the radio buttons and set the checked property to false, effectively resetting the radio buttons to their default state.

Keep in mind that the input type "reset" could by annoying if someone click it by mistake. It´s not recommended to use it.

Jeffuy
  • 36
  • 3