我的 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() {

  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 2

我试图解决你的问题：

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

  };

};