0
124
ViewsObtener valor del campo de entrada javascript vainilla
Estoy tratando de obtener el valor de mi campo de entrada con vainilla javascript para crear una calculadora de propinas.
Por alguna razón, el valor regresa pero como vacío. He probado con innerText, innetHTML, value y no funciona.
¿Puede alguien señalarme cuál es mi error aquí?
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> 
3 answers
Answer question0
Todo lo que tiene que hacer es presionar debajo de la línea dentro de addEventListener . Está capturando o tomando valor al comienzo del script, hasta entonces la entrada está vacía y luego el valor estará empty . Entonces, creo que desea tomar un valor cuando ingresa algo en la entrada y cuando hace clic en el botón calculate . es decir, dentro del detector de eventos.
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>0
creo que necesitas moverte
const totalBill = document.getElementById('totalBill').value;Dentro del evento al hacer clic, de lo contrario, leerá el valor vacío cuando se cargue la página.
0
Inicializa la variable totalBill en la carga del script y antes de hacer clic en el botón calculate . mover totalBill dentro 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() })