show the summary

from Stack O question

by trentHarlem

HTML

<input type="number" class="count" value="0" min="0" max="10" id="inputNumberSelect-light" oninput="priceLight()">
<input type="number" class="count ml-3" value="0" min="0" max="10" id="inputNumberDiscSelect-light" oninput="priceLightDisc()">


<div id="price__light_total" class=''>Price: </div>

<div id="price__light_total_disc">Price: </div>

<div id="summaryTotal">
  <p>
    Summary Demo
  </p>
  <div id="show__price_total">0</div>
  <!-- <td id="show__price_total"></td> -->
  <!--  td No Workie. -->
</div>

CSS

body{
  font: 1.2em system-ui;
}

JavaScript

const showPriceTotal = document.getElementById('show__price_total')

// declared as global for demo
let total_light = 0
let total_light_disc = 0

function priceLight() {
  let amount_light = document.getElementById('inputNumberSelect-light').value;
  let price_light = 40;
  //let total_light = amount_light * price_light;
  total_light = amount_light * price_light;
  document.getElementById("price__light_total").innerHTML = "Price: " + total_light + " zł";
  //// update inside
  //showPriceTotal.innerHTML = total_light + total_light_disc

  //// or update summary w/func
  summaryUpdate()
  return total_light
}

function priceLightDisc() {
  let amount_light_disc = document.getElementById("inputNumberDiscSelect-light").value;
  let price_light_disc = 35;
  total_light_disc = amount_light_disc * price_light_disc;

  document.getElementById("price__light_total_disc").innerHTML = "Price: " + total_light_disc + " zł";
  //// update inside 
  //showPriceTotal.innerHTML = total_light + total_light_disc
  ////  or with function
  summaryUpdate()
  return total_light_disc
}

// function to update summary totals
function summaryUpdate() {
  const firstSelection = total_light || total_light_disc;
  showPriceTotal.innerHTML = (total_light + total_light_disc) || firstSelection
}