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

Question

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.

`if (donateAmount.value == "amount0") {....` only runs when page is rendered, that code is not going to magically update when you alter the radio buttons. To make your code work, it needs change event listeners on the radio and a function for the ifs or move the check inside your donateIsPressed method . It is unclear why you are not using value in the radio button and just reading that when the form is submitted. — epascarello, Jul 21 '20 at 13:50
There's honestly quite a bit wrong here. Needing to use event listeners is part of it. You're also declaring a new `totalAmount` variable in each `if` block, but have no such variable in a larger scope where you actually need it. Also, `donateAmount` is the *form*, not the radio button. The form itself has no "value". — David, Jul 21 '20 at 13:56
@j08691 that's actually just a dumb mistake on my part, now that you point it out, I suppose I should just make it > instead of >==, that was something I never would have caught, thanks for the info! — PNK3216, Jul 21 '20 at 13:58
@epascarello That makes a lot of sense, I should have thought about that earlier, and the main reason there's a lot of slip ups there is because I'm really new to this, I haven't even heard of the word "event listeners" before this but I'm going to check it out since more than one dude has mentioned it on my question. thanks for the help! — PNK3216, Jul 21 '20 at 14:02
Have you checked the console? They might be an error here with the semicolon as well onclick='donateIsPressed ();' — Romain BOBOE, Jul 21 '20 at 14:02
@RomainBOBOE `onclick="alert('aaaa'); foo(); bar(); baz();"` is valid, not sure what you think issue is with the semicolon. — epascarello, Jul 21 '20 at 14:04
@Iwrestledabearonce. Yeah, I really have no clue where I'm supposed to place semicolons and where not to so I tend to, uhhhh.... overshoot. — PNK3216, Jul 21 '20 at 14:05
@RomainBOBOE I did check the console and the semicolon didn't seem to make a difference, thanks for the input anyways though! — PNK3216, Jul 21 '20 at 14:06
@David ohhhh, that makes sense. I vaguely remember some stuff about global and local scopes and whatnot, I'll look into that — PNK3216, Jul 21 '20 at 14:08
`selectedAmount` is the form, you are reading the value of it expecting it to be the radio button. https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value — epascarello, Jul 21 '20 at 14:11
@epascarello, ohhh, so I'm supposed to check the value of the radio buttons? wow. I am utterly amazed by the fact that I DID NOT THINK ABOUT THAT FOR THE ENTIRETY OF LAST WEEK. Thanks for the answer, I appreciate it. — PNK3216, Jul 21 '20 at 14:14
Thank you to everyone that answered, I just want to say I never would have been able to do this within the next week without you guys! — PNK3216, Jul 21 '20 at 14:42

score 1 · Answer 1 · edited Jul 21 '20 at 14:18

I tried to solve your problem :

First I changed buttons value
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>

Hey, I tried it out and it worked perfectly, I have not the slightest clue how the code works but I really appreciate the help, I didn't think I would have a solution ten minutes after posting the answer, You've been a big help! — PNK3216, Jul 21 '20 at 14:33
Happy because you are satisfied, Try to learn more it's all come by practice — gabida, Jul 21 '20 at 14:40

score 1 · Accepted Answer · answered Jul 21 '20 at 14:17

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>

hey, I didn't leave a reply yesterday since I was studying the code you posted but now that I'm here I just want to thank you for posting this answer, it's greatly appreciated! — PNK3216, Jul 22 '20 at 12:12

score 0 · Answer 3 · answered Jul 21 '20 at 14:56

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

score -1 · Answer 4 · edited Jul 21 '20 at 14:08

-1

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

edited Jul 21 '20 at 14:08

epascarello

204,599
20
195
236

answered Jul 21 '20 at 13:53

StefanN

871
6
19

you copied over the typo in the if (I edited it out) – epascarello Jul 21 '20 at 14:08
But you are using getElementById on the form, it is not going to have a value.. – epascarello Jul 21 '20 at 14:09
thanks for the answer, I knew about the typo, it's not in my actual code, I just acidentally added it in when asking the question, but thanks anyways. – PNK3216 Jul 21 '20 at 14:12

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

4 Answers4

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