Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

125
Visualizações
Getting value from input field vanilla javascript

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>

enter image description here

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

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.

about 4 years ago · Juan Pablo Isaza Relatório

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()
})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda