Getting value from input field vanilla javascript

Question

Im trying to get the value of my input field with vanilla javascript to create a tip calculator.

For some reason, the value returns but as empty. I have tried innerText, innetHTML, value, and it doesn't work.

Can someone point me what is my mistake here?

const calculateTipBtn = document.getElementById('calculate');
const totalBill = document.getElementById('totalBill').value;
const resetBtn = document.getElementById('reset');

calculateTipBtn.addEventListener('click', () => {

  if (totalBill.value === '') {
    console.log('Value can\'t be empty')
  } else {
    alert('there is something')
    console.log(totalBill)
  }
  console.log(totalBill)
})

resetBtn.addEventListener('click', () => {
  window.location.reload()
})

<div id="wrapper">
  <header>Vanilla Tip Calculator</header>

  <div class="content">
    <label for="totalBill">Enter Total bill</label>
    <input type="text" name="total" id="totalBill">
    <label for="tipPercentage"> How much tip are you feeling?</label>
    <input type="checkbox" name="tip" value="15"><span>15%</span>
    <input type="checkbox" name="tip" value="20"><span>20%</span>
    <input type="checkbox" name="tip" value="30"><span>30%</span>
    <br>
    <button id="calculate">Calculate!</button>
    <button id="reset">Reset</button>
  </div>

  <div class="tip-result"></div>
</div>

Ivan Lo Greco · Accepted Answer · 2022-08-06 16:30:27Z

3

I think you need to move

const totalBill = document.getElementById('totalBill').value;

Inside the on click event, otherwise you will read the empty value when the page loads.

answered Aug 6, 2022 at 16:30

Ivan Lo Greco

3251 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DecPK · Accepted Answer · 2022-08-06 16:34:29Z

2

All you have to do is to push below line inside the addEventListener. You are caputuring or taking value at the start of the script, till then the input is empty and then the value will be empty. So I think you want to take a value when you enter something in the input and when you click calculate button. i.e. inside the event listener.

calculateTipBtn.addEventListener('click', () => {
  const totalBill = document.getElementById('totalBill').value; // THIS
  if (totalBill.value === '') {
    console.log("Value can't be empty");
  } else {
    alert('there is something');
    console.log(totalBill);
  }
  console.log(totalBill);
});

const calculateTipBtn = document.getElementById('calculate');
const resetBtn = document.getElementById('reset');
const totalBill = document.getElementById('totalBill');

calculateTipBtn.addEventListener('click', () => {
  const totalBillValue = totalBill.value;
  if (totalBill.value === '') {
    console.log("Value can't be empty");
  } else {
    alert('there is something');
    console.log(totalBillValue);
  }
});

resetBtn.addEventListener('click', () => {
  window.location.reload();
});

<div id="wrapper">
  <header>Vanilla Tip Calculator</header>

  <div class="content">
    <label for="totalBill">Enter Total bill</label>
    <input type="text" name="total" id="totalBill" />
    <label for="tipPercentage"> How much tip are you feeling?</label>
    <input type="checkbox" name="tip" value="15" /><span>15%</span>
    <input type="checkbox" name="tip" value="20" /><span>20%</span>
    <input type="checkbox" name="tip" value="30" /><span>30%</span>
    <br />
    <button id="calculate">Calculate!</button>
    <button id="reset">Reset</button>
  </div>

  <div class="tip-result"></div>
</div>

edited Aug 6, 2022 at 16:34

answered Aug 6, 2022 at 16:27

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

4 Comments

jfr01 Over a year ago

I see, even after moving my if condition will show that there is something whenever the value is empty, why is that?

jfr01 Over a year ago

Also why would the const outside the function does not work, it should be accessible, I'm confused.

jfr01 Over a year ago

I added if (!totalBill.value) instead and now it should value cant be empty, thank you

DecPK Over a year ago

@Yogi I've shown both ways. More the merrier

Dipanjan Panja · Accepted Answer · 2022-08-06 16:35:57Z

0

You initialize totalBill variable on script load and before you click on the calculate button. move totalBill inside onClick

const calculateTipBtn = document.getElementById('calculate');
const resetBtn = document.getElementById('reset');

calculateTipBtn.addEventListener('click', () => {
  const totalBill = document.getElementById('totalBill').value;
  if (totalBill === '') {
    console.log('Value can\'t be empty')
  } else {
    alert('there is something')
    console.log(totalBill)
  }
})

resetBtn.addEventListener('click', () => {
  window.location.reload()
})

answered Aug 6, 2022 at 16:35

Dipanjan Panja

5335 silver badges13 bronze badges

Comments

Andy · Accepted Answer · 2022-08-06 17:22:22Z

When the page loads you're already assigning the value from the input into the variable but at that point it's an empty string which is why you're getting that output. So you need to get that value when the calculate button is clicked instead.

In this example I've moved your markup around a little (changed the check boxes to radio buttons since you shouldn't be able to add multiple tip values), and added a new function that enables/disables the calculate button if nothing has been entered into the total bill input. It then calculates and outputs both the tip, and the total (plus tip).

const totalBill = document.querySelector('#totalBill');
const calculate = document.querySelector('.calculate');
const tipResult = document.querySelector('.tipResult');
const totalResult = document.querySelector('.totalResult');

totalBill.addEventListener('input', handleInput);
calculate.addEventListener('click', handleCalculate);

function handleInput() {
  if (this.value && !Number.isNaN(+this.value)) {
    calculate.disabled = false;
  } else {
    calculate.disabled = true;
  }
}

function handleCalculate() {
  const total = +totalBill.value;
  const tipSelector = '[name="tip"]:checked';
  const tip = +document.querySelector(tipSelector).value;
  const calc = (total * tip) / 100;
  tipResult.textContent = calc;
  totalResult.textContent = total + tip;
}

.totalBill, .tip, .tipWrapper { display: block; margin: 0.5em 0; }
.calculate { background: lightgreen; border-radius: 5px; }
.calculate:disabled { background: lightsalmon; }

<div class="content">
  <label class="totalBill" for="totalBill">
    Enter bill total
    <input type="text" name="total" id="totalBill">
  </label>
  <label class="tip">
    How much tip are you adding?
    <input type="radio" name="tip" value="15" checked>15%</input>
    <input type="radio" name="tip" value="20">20</input>
    <input type="radio" name="tip" value="30">30%</input>
  </label>
  <button class="calculate" disabled>Calculate!</button>
</div>
<div class="tipWrapper">
  Tip: <span class="tipResult"></span>
</div>
<div class="totalWrapper">
  Total: <span class="totalResult"></span>
</div>

Collectives™ on Stack Overflow

Getting value from input field vanilla javascript

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related