HTML/JS form not adding up values

Question

I cannot get my form to add up the values of the components of a necklace to display a final price on my website.

This is my code:

<div class="c-query">
 <div class="c-title">
 <h2 class="js-split">
Select diamond size</h2>
 </div>
 <div class="c-reply">
 <div style="--order:1">
 <input type="radio" name="diamondsize" id="1ct" value="450">
 <label style="display:flex; align-items:center; justify-content:center;" for="design">
1 ct  <span style="font-size:30px;">○</span></label>
 </div>
 <div style="--order:2">
 <input type="radio" name="diamondsize" id="2ct" value="1000">
 <label style="display:flex; align-items:center; justify-content:center;"for="des&amp;dev">
2 ct  <span style="font-size:40px;">○</span></label>
 </div>
 <div style="--order:3">
 <input type="radio" name="diamondsize" id="3ct" value="1500">
 <label style="display:flex; align-items:center; justify-content:center;"for="mob-des">
3 ct  <span style="font-size:50px;">○</span></label>
 </div>
 </div>
 </div>
 <div class="c-query">
 <div class="c-title">
 <h2 class="js-split">
Select length</h2>
 </div>
 <div class="c-reply">
 <div style="--order:1">
 <input type="radio" name="chainlength" id="16in" value="16in">
 <label for="range1">
16 inch: neckline</label>
 </div>
 <div style="--order:2">
 <input type="radio" name="chainlength" id="18in" value="18in">
 <label for="range2">
18 inch: collarbone</label>
 </div>
 <div style="--order:3">
 <input type="radio" name="chainlength" id="20in" value="20in">
 <label for="range3">
20 inch: collar to bust</label>
 </div>
 <div style="--order:4">
 <input type="radio" name="chainlength" id="22in" value="22in">
 <label for="range4">
22 inch: bust</label>
 </div>
 </div>
 </div>
 <div class="c-query">
 <div class="c-title">
 <h2 class="js-split">
Select metal</h2>
 </div>
 <div class="c-reply">
 <div style="--order:1">
 <input type="radio" name="Source" id="ag925" value="299">
 <label for="awww">
Silver 925</label>
 </div>
 <div style="--order:2">
 <input type="radio" name="Source" id="au18" value="2999">
 <label for="insp">
Gold 18K</label>
 </div>
 <div style="--order:3">
 <input type="radio" name="Source" id="pl950" value="1999">
 <label for="behance">
Platinum 950</label>
 </div>
 <div style="--order:4">
 <input type="radio" name="Source" id="pd950" value="2999">
 <label for="other">
Palladium 950</label>
 </div>
 </div>
 </div>

<script>
  let diamondSizeValue = 0;
  let metalValue = 0;

  document.querySelectorAll('input[name="diamondsize"]').forEach(input => {
    input.addEventListener('change', function() {
      diamondSizeValue = this.value;
      console.log('Diamond size value:', diamondSizeValue);
      updateTotalPrice();
    });
  });

  document.querySelectorAll('input[name="Source"]').forEach(input => {
    input.addEventListener('change', function() {
      metalValue = this.value;
      console.log('Metal value:', metalValue);
      updateTotalPrice();
    });
  });

  function updateTotalPrice() {
    const totalPrice = parseInt(diamondSizeValue) + parseInt(metalValue);
    document.querySelector('#total_price').innerHTML = `Total price: $${totalPrice}`;
    console.log('Total price:', totalPrice);
  }
</script>

<h1 class="js-split">
Price with shipping to <p id="country-name">your home</p></h1>
<p class="js-split">
<p id="currency-sym"></p> <h2 id="total_price"></h2>

I expected this code to display a total price adding up the two values when the radio buttons are selected, but instead it reads: "$ " and I'm not sure how to fix it. All help is appreciated.

What reads "$"? The console output, or your element's content? Do you get any errors? — Oskar Grosser, Mar 08 '23 at 03:47
[You are trying to find an element before it exists](https://stackoverflow.com/a/8716680/13561410). Is that your issue? — Oskar Grosser, Mar 08 '23 at 03:50
I forgot to include the
tags in the question. The web page reads "$ " the console does not read anything. I tried to move the js script to just before the closing
tag and I still see "$ " — gsam34565840, Mar 08 '23 at 10:27

Mister Jojo · Answer 1 · 2023-03-09T02:09:38.330

the right way to code a form.

const
  myForm = document.forms['my-form']  // All element's form parent.
, prices = 
  { diamondsize : { '1ct': 450, '2ct':1000, '3ct':1500 }
  , chainlength : { '16in': 1600, '18in':1800, '20in':2000, '22in':2200 }
  , metal       : { 'ag925': 299, 'au18':2999, 'pl950':1999, 'pd950':2999 }
  };
myForm.oninput = updateTotalPrice; // for any input elements change

myForm.onreset = () =>
  {
  myForm.totalPrice.textContent = 0;
  //      ^-- use forms names
  }
myForm.onsubmit = e =>
  {
  e.preventDefault(); // disable submit for testing.

  updateTotalPrice();
  console.log( 'result -> ', JSON.stringify( Object.fromEntries( new FormData( myForm ))));
  setTimeout( console.clear, 7000);
  }
function updateTotalPrice()
  {
  let total   = 0
    , entries = Object.fromEntries( new FormData( myForm )) // get all inputs values
    ;
  for (let key in entries)
    total +=  prices[key][entries[key]];
 
  myForm.totalPrice.textContent = total;
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
fieldset { 
  margin    : 1em;
  padding   : 1em;
  width     : 44em; 
  min-width : 44em;
  }
legend {
  padding: 0 .5em;
  }
label { 
  margin : .4em 1em .3em .5em;
  }
span[data-circle]::before {
  box-sizing    : border-box;
  display       : inline-block;
  content       : '';
  border        : 1px solid black;
  border-radius : 50%;
  margin-left   : .5em;
  }
span[data-circle="30"]::before {  width  : 30px; height : 30px; }
span[data-circle="40"]::before {  width  : 40px; height : 40px; }
span[data-circle="50"]::before {  width  : 50px; height : 50px; }

.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}
.as-console-row-code  { background-color: yellow;}

<form name="my-form">
  <fieldset>
    <legend>Diamond size</legend>
    <label>
      <input type="radio" name="diamondsize" value="1ct" required>
      1 ct
      <span data-circle="30"></span>
    </label>
    <label>
      <input type="radio" name="diamondsize" value="2ct">
      2 ct
      <span data-circle="40"></span>
    </label>
    <label>
      <input type="radio" name="diamondsize" value="3ct">
      3 ct
      <span data-circle="50"></span>
    </label>
  </fieldset>
  <fieldset>
    <legend>Length</legend>
    <label>
      <input type="radio" name="chainlength" value="16in" required>
      16 inch: neckline
    </label>
    <label>
      <input type="radio" name="chainlength" value="18in">
      18 inch: collarbone
    </label>
    <label>
      <input type="radio" name="chainlength" value="20in">
      20 inch: collar to bust
    </label>
    <label>
      <input type="radio" name="chainlength" value="22in">
      22 inch: bust
    </label>
  </fieldset>
  <fieldset>
    <legend>Metal</legend>
    <label>
      <input type="radio" name="metal" value="ag925" required>
      Silver 925
    </label>
    <label>
      <input type="radio" name="metal" value="au18">
      Gold 18K
    </label>
    <label>
      <input type="radio" name="metal" value="pl950">
      Platinum 950
    </label>
    <label>
      <input type="radio" name="metal" value="pd950">
      Palladium 950
    </label>
  </fieldset>
  <br> <br>
  Total Price : <output name="totalPrice">0</output>
  <br> <br>
  <button type="submit">submit</button>
  <button type="reset">Reset</button>
</form>

HTML/JS form not adding up values

1 Answers1