const totalBill = document.querySelector(".total-bill"); let errorDiv = document.querySelector(".error"); function isValid(e) { if (totalBill.value.trim().length == 0) { let para = document.createElement("div"); para.innerText = "Please enter the total amount of bill"; // para.classList.add("bill-para"); para.setAttribute('class', 'bill-error') console.log(para); errorDiv.innerHTML = para; } e.preventDefault(); }HTML:
<div class="container"> <div class="error"> </div> <div class="box-container"> <h1 class="heading">TIP CALCULATOR</h1> <form action=""> <div class="box"> <label>How much was your bill?</label><br> <input type="number" placeholder="Total Bill" class="total-bill"> </div> </form> </div>Así que estoy tratando de agregar un div en la sección div.error y quiero agregar un div llamado div.bill-error pero cada vez que intento reemplazar el HTML interno y ejecutar el código. Me muestra '[Objeto HTMLDivElement]' en lugar de "Ingrese el monto total de la factura". Pero en la consola veo que se crea el div. Pero no se inserta dentro.
Alguien me puede decir donde esta el problema y la solucion. Muchas gracias.
Utilice errorDiv.appendChild(para); , o, si desea eliminar primero el contenido existente en errorDiv , entonces errorDiv.textContent = ''; errorDiv.appendChild(para); .
Has probado, reemplaza
errorDiv.innerHTML = para;con
errorDiv.append(para);use appendChild() , modifiqué su código, aquí está el fragmento:
const totalBill = document.querySelector(".total-bill"); let errorDiv = document.querySelector(".error"); function isValid(e) { if (totalBill.value.trim().length == 0) { let para = document.createElement("div"); para.innerHTML = "Please enter the total amount of bill"; // para.classList.add("bill-para"); para.setAttribute('class', 'bill-error') errorDiv.appendChild(para); } } <div class="container"> <div class="error"> </div> <div class="box-container"> <h1 class="heading">TIP CALCULATOR</h1> <form action=""> <div class="box"> <label>How much was your bill?</label><br> <input type="number" placeholder="Total Bill" class="total-bill"> </div> <button type="button" onclick="isValid();">Check</button> </form> </div>