我的 JavaScript 没有正确响应我的 HTML 和 CSS（即按钮和 <form> 标签）

Question

我目前正在为我在空闲时间工作的网站制作捐赠页面。一直很顺利，直到上周遇到了问题。我的 JS 没有正确响应我的 HTML，我无法修复它。这是我的 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>

HTML 非常简单，有一个带有多个选项的标签，以及一个应该开始交易的按钮。JS 应该做的是检查选择了哪个选项，然后将“totalAmount”变量设置为所选的任何值。然后它应该根据 totalAmount 的值给出答案。但是，它们都不起作用，而且我目前无法修复。所以如果你们中的一个人能指出我正确的方向，我将不胜感激

Answer 1

尝试这个。function donateIsPressed() {&nbsp; var donateAmount = document.querySelector('input[name="donateRadio"]:checked');&nbsp; if (donateAmount) {&nbsp; &nbsp; if (donateAmount.value == "amount0") {&nbsp; &nbsp; &nbsp; var totalAmount = 0;&nbsp; &nbsp; } else if (donateAmount.value == "amount1") {&nbsp; &nbsp; &nbsp; var totalAmount = 10;&nbsp; &nbsp; } else if (donateAmount.value == "amount2") {&nbsp; &nbsp; &nbsp; var totalAmount = 50;&nbsp; &nbsp; } else if (donateAmount.value == "amount3") {&nbsp; &nbsp; &nbsp; var totalAmount = 100;&nbsp; &nbsp; } else if (donateAmount.value == "amount4") {&nbsp; &nbsp; &nbsp; var totalAmount = 500;&nbsp; &nbsp; };&nbsp; }&nbsp; if (totalAmount >= 0) {&nbsp; &nbsp; alert("Thank you for your donation of " + totalAmount + "$!")&nbsp; } else {&nbsp; &nbsp; alert("You didn't select anything!")&nbsp; };};<form id="selectedAmount" name="selectedAmount">&nbsp; <input type="radio" name="donateRadio" value="amount0"> 0 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="amount1"> 10 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="amount2"> 50 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="amount3"> 100 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="amount4"> 500 Dollars </input></form><div onclick='donateIsPressed ();' class="donateButton" id="processDonation"> test donate button </div>

Answer 2

我试图解决你的问题：首先我改变了按钮值然后我实现这个逻辑：var donateAmount = document.getElementById("selectedAmount");var totalAmount = -1function donateIsPressed() {&nbsp; var radios = donateAmount.elements["donateRadio"];&nbsp; for (var i = 0; i < radios.length; i++) {&nbsp; &nbsp; if (radios[i].checked) { // radio checked?&nbsp; &nbsp; &nbsp; totalAmount = parseInt(radios[i].value); // if so, hold its value in val&nbsp; &nbsp; &nbsp; break; // and break out of for loop&nbsp; &nbsp; }&nbsp; }&nbsp; if (totalAmount >= 0) {&nbsp; &nbsp; alert("Thank you for your donation of " + totalAmount + "$!")&nbsp; } else {&nbsp; &nbsp; alert("You didn't select anything!")&nbsp; };};<form id="selectedAmount" name="selectedAmount">&nbsp; <input type="radio" name="donateRadio" value="0"> 0 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="10"> 10 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="50"> 50 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="100"> 100 Dollars </input> <br>&nbsp; <input type="radio" name="donateRadio" value="500"> 500 Dollars </input>&nbsp; <div onclick='donateIsPressed ();' class="donateButton" id="processDonation"> test donate button </div></form>

Answer 3

//Globalslet procesDonation, selectedAmount;const data = {amount0: 0, amount1: 10, amount2: 50, amount3: 100, amount4: 500};//Setupconst setup = () => {&nbsp; &nbsp; //Id's should be unique and so can be set gobal&nbsp; &nbsp; processDonation = document.querySelector('#processDonation');&nbsp; selectedAmount = document.querySelector('#selectedAmount');&nbsp;&nbsp;&nbsp; processDonation.addEventListener('click', donateOnClick);&nbsp;&nbsp;};//Functionsconst donateOnClick = (event) => {&nbsp; &nbsp; if(selectedAmount == null) return;&nbsp;&nbsp;&nbsp; const target = event.currentTarget;&nbsp;&nbsp;&nbsp; if(target.nodeName == 'DIV') {&nbsp; &nbsp; const selectedButton = selectedAmount.querySelector('[name="donateRadio"]:checked');&nbsp; &nbsp; const key = selectedButton?.value;&nbsp; &nbsp; const amount = getAmount(key);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; donateMessage(amount);&nbsp; }};const getAmount = (key) => {&nbsp; &nbsp; if(data == null || key == null || !Object.keys(data).includes(key)) return;&nbsp;&nbsp;&nbsp; &nbsp; return data[key] || 0;}const donateMessage = (amount) => {&nbsp; &nbsp; if(amount == null) return;&nbsp;&nbsp;&nbsp; const message = amount > 0 ? `Thank you for your donation of ${amount}$!"` : `You didn't select anything!`;&nbsp;&nbsp;&nbsp; alert(message);}window.addEventListener('load', setup);<form id="selectedAmount" name="selectedAmount">&nbsp; <input type="radio" name="donateRadio" value="amount0" checked> <label>0 Dollars</label> <br>&nbsp; <input type="radio" name="donateRadio" value="amount1"> <label>10 Dollars</label> <br>&nbsp; <input type="radio" name="donateRadio" value="amount2"> <label>50 Dollars</label> <br>&nbsp; <input type="radio" name="donateRadio" value="amount3"> <label>100 Dollars</label> <br>&nbsp; <input type="radio" name="donateRadio" value="amount4"> <label>500 Dollars</label></form><div&nbsp;class="donateButton"&nbsp;id="processDonation">&nbsp;test&nbsp;donate&nbsp;button&nbsp;</div>

Answer 4

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