亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

我的 JavaScript 沒有正確響應我的 HTML 和 CSS（即按鈕和 <form> 標簽）

我的 JavaScript 沒有正確響應我的 HTML 和 CSS（即按鈕和 <form> 標簽）

一只萌萌小番薯 2022-11-27 16:08:16
我目前正在為我在空閑時間工作的網站制作捐贈頁面。一直很順利，直到上周遇到了問題。我的 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 的值給出答案。但是，它們都不起作用，而且我目前無法修復。所以如果你們中的一個人能指出我正確的方向，我將不勝感激
查看完整描述

4 回答

?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

嘗試這個。


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>



查看完整回答
反對 回復 2022-11-27
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

我試圖解決你的問題：

  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>


查看完整回答
反對 回復 2022-11-27
?
達令說

TA貢獻1821條經驗 獲得超6個贊

//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>


查看完整回答
反對 回復 2022-11-27
?
阿晨1998

TA貢獻2037條經驗 獲得超6個贊

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

  };

};


查看完整回答
反對 回復 2022-11-27
  • 4 回答
  • 0 關注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號