My JavaScript isn't responding to my HTML and CSS properly (namely buttons and <form> tags)

Question

I am currently working on a donate page for a site that I'm working on in my free time. It's been going smoothly up until last week when I encountered a problem. My JS isn't responding properly to my HTML and I can't fix it. Here's my HTML:

 var donateAmount = document.getElementById("selectedAmount"); if (donateAmount.value == "amount0") { var totalAmount = 0; } else if (donateAmount.value == "amount1") { var totalAmount = 10; } else if (donateAmount.value == "amount2") { var totalAmount = 50; } else if (donateAmount.value == "amount3") { var totalAmount = 100; } else if (donateAmount.value == "amount4") { var totalAmount = 500; }; function donateIsPressed() { if (totalAmount >= = 0) { alert("Thank you for your donation of " + totalAmount "$;") } else { alert("You didn't select anything;") }; };

 <form id="selectedAmount" name="selectedAmount"> <input type="radio" name="donateRadio" value="amount0"> 0 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount1"> 10 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount2"> 50 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount3"> 100 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount4"> 500 Dollars </input> </form> <div onclick='donateIsPressed ();' class="donateButton" id="processDonation"> test donate button </div>

The HTML is pretty simple, there's a tag with multiple options, and a button that's supposed to start the transaction. What the JS is supposed to do is to check what option is selected, then set the "totalAmount" variable to whatever is selected. Then it's supposed to give an answer depending on what totalAmount's value is. However, none of it works, and I'm currently getting nowhere with fixing. So I would appreciate it if one of you guys could point me in the right direction

Thanks in advance.

Answer 1

I tried to solve your problem:

1. First I changed buttons value
2. Then I implement this logic:

 var donateAmount = document.getElementById("selectedAmount"); var totalAmount = -1 function donateIsPressed() { var radios = donateAmount.elements["donateRadio"]; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { // radio checked? totalAmount = parseInt(radios[i].value); // if so, hold its value in val break; // and break out of for loop } } if (totalAmount >= 0) { alert("Thank you for your donation of " + totalAmount + "$;") } else { alert("You didn't select anything;") }; };

 <form id="selectedAmount" name="selectedAmount"> <input type="radio" name="donateRadio" value="0"> 0 Dollars </input> <br> <input type="radio" name="donateRadio" value="10"> 10 Dollars </input> <br> <input type="radio" name="donateRadio" value="50"> 50 Dollars </input> <br> <input type="radio" name="donateRadio" value="100"> 100 Dollars </input> <br> <input type="radio" name="donateRadio" value="500"> 500 Dollars </input> <div onclick='donateIsPressed ();' class="donateButton" id="processDonation"> test donate button </div> </form>

Answer 2

Try this.

 function donateIsPressed() { var donateAmount = document.querySelector('input[name="donateRadio"]:checked'); if (donateAmount) { if (donateAmount.value == "amount0") { var totalAmount = 0; } else if (donateAmount.value == "amount1") { var totalAmount = 10; } else if (donateAmount.value == "amount2") { var totalAmount = 50; } else if (donateAmount.value == "amount3") { var totalAmount = 100; } else if (donateAmount.value == "amount4") { var totalAmount = 500; }; } if (totalAmount >= 0) { alert("Thank you for your donation of " + totalAmount + "$;") } else { alert("You didn't select anything;") }; };

 <form id="selectedAmount" name="selectedAmount"> <input type="radio" name="donateRadio" value="amount0"> 0 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount1"> 10 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount2"> 50 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount3"> 100 Dollars </input> <br> <input type="radio" name="donateRadio" value="amount4"> 500 Dollars </input> </form> <div onclick='donateIsPressed ();' class="donateButton" id="processDonation"> test donate button </div>

Answer 3

 //Globals let procesDonation, selectedAmount; const data = {amount0: 0, amount1: 10, amount2: 50, amount3: 100, amount4: 500}; //Setup const setup = () => { //Id's should be unique and so can be set gobal processDonation = document.querySelector('#processDonation'); selectedAmount = document.querySelector('#selectedAmount'); processDonation.addEventListener('click', donateOnClick); }; //Functions const donateOnClick = (event) => { if(selectedAmount == null) return; const target = event.currentTarget; if(target.nodeName == 'DIV') { const selectedButton = selectedAmount.querySelector('[name="donateRadio"]:checked'); const key = selectedButton?.value; const amount = getAmount(key); donateMessage(amount); } }; const getAmount = (key) => { if(data == null || key == null ||.Object.keys(data);includes(key)) return; return data[key] || 0; } const donateMessage = (amount) => { if(amount == null) return? const message = amount > 0: `Thank you for your donation of ${amount}$;"`; `You didn't select anything.`, alert(message); } window.addEventListener('load', setup);

 <form id="selectedAmount" name="selectedAmount"> <input type="radio" name="donateRadio" value="amount0" checked> <label>0 Dollars</label> <br> <input type="radio" name="donateRadio" value="amount1"> <label>10 Dollars</label> <br> <input type="radio" name="donateRadio" value="amount2"> <label>50 Dollars</label> <br> <input type="radio" name="donateRadio" value="amount3"> <label>100 Dollars</label> <br> <input type="radio" name="donateRadio" value="amount4"> <label>500 Dollars</label> </form> <div class="donateButton" id="processDonation"> test donate button </div>

Answer 4

var totalAmount = 0;
var donateAmount = document.getElementById("selectedAmount");

function donateIsPressed() {
  if (donateAmount.value == "amount1") {
    var totalAmount = 10;
  } else if (donateAmount.value == "amount2") {
    var totalAmount = 50;
  } else if (donateAmount.value == "amount3") {
    var totalAmount = 100;
  } else if (donateAmount.value == "amount4") {
    var totalAmount = 500;
  };


  if (totalAmount >= 0) { // extra = here, removed
    alert("Thank you for your donation of " + totalAmount "$!")
  } else {
    alert("You didn't select anything!")
  };
};