CODEWITHSUNDEEP
javascripthtmlcss
PNK3216
PNK3216

Reputation: 13

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

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.

Upvotes: 1

Views: 93

Answers (4)

Jens Ingels
Jens Ingels

Reputation: 816

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

Upvotes: 0

gabida
gabida

Reputation: 170

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>

Upvotes: 1

Vivek Jain
Vivek Jain

Reputation: 2864

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>

Upvotes: 1

StefanN
StefanN

Reputation: 911

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

Upvotes: -1

Related Questions