Q: JS: Update product cost base on ranges of order input I am trying to make a form that automatically reduces the base price of an item based on how much you order with js. You can see the javascript below:


window.addEventListener("load", e => {
  var cardcost = 10;
  document.getElementById("count").addEventListener("input", updateCost);

  function updateCost(e) {
    let val = e.target.value

    if (val >= 100 && val <= 499) {
      cardcost = cardcost * .95;
    }
    if (val >= 500 && val <= 999) {
      cardcost = cardcost * .9;
    }
    if (val >= 1000) {
      cardcost = cardcost * .85;
    }
  }
  document.getElementById("curcost").textContent = cardcost;
});
<div>
  <form action="send.php" method="POST" class="form-content" id="popupform">
    <label for="count">
             <h4>How many cards would you like?</h4>
             <input type="text" name="count" value="50" id="count">
           </label>
    <p>Current Cost Per Product: <output id="curcost"></output> </p>
  </form>
</div>


So I have a base card value at the top and an event listener to identify the input value. Then I tried an if statement to isolate the range of inputs and I want to multiply different ratios on my base value to update the current cost per item. It can identify the target value but it doesn't seem to run through the if statements.
Any help would be greatly appreciated! (go easy on me I am new to js)

A: You have to put your .textContent inside function also so it reacts to input. It was doing nothing on input, just on load, where cardcost was still empty.
Also learn how to use console.log on every step so you can debug your code.
And what is JavaScript Scope 


window.addEventListener("load", e => {
  var cardcost = 10;
  document.getElementById("count").addEventListener("input", updateCost);

  function updateCost(e) {
    let val = e.target.value


    if (val >= 100 && val <= 499) {
      cardcost = cardcost * .95;
    }
    if (val >= 500 && val <= 999) {
      cardcost = cardcost * .9;
    }
    if (val >= 1000) {
      cardcost = cardcost * .85;
    }
    console.clear()
    console.log(cardcost)
    document.getElementById("curcost").textContent = cardcost;
  }
});
<div>
  <form action="send.php" method="POST" class="form-content" id="popupform">
    <label for="count">
             <h4>How many cards would you like?</h4>
             <input type="text" name="count" value="50" id="count">
           </label>
    <p>Current Cost Per Product: <output id="curcost"></output> </p>
  </form>
</div>



A: I am following up to make one small improvement to this answer. As it was, if the user types in one answer and then deletes it or changes the quality, the card value is calculated based on the updated value vs. the original base value. I fixed this by clearing the value with this newcardcost=cardcost at the start of each if statement:
    var cardcost = 10

    document.getElementById("count").addEventListener("input", updateCost);
    function updateCost(e) {
      let val = e.target.value
      let newcardcost = cardcost;
      if (val >= 100 && val <= 499) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .95).toFixed(2);
      }
      if (val >= 500 && val <= 999) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .9).toFixed(2);
      }
      if (val >= 1000) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .85).toFixed(2);
      }
      document.getElementById("curcost").textContent = newcardcost;
    }

This works, but I am wondering if there is a more efficient way to do this. Thanks for your comments.
