我的 JavaScript 沒有正確響應我的 HTML 和 CSS（即按鈕和<form>標簽）</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

我試圖解決你的問題：

1. 首先我改變了按鈕的值
2. 然后我實現這個邏輯：

 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

嘗試這個。

 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!")
  };
};