Hola, estoy tratando de calcular el porcentaje usando la entrada de la entrada HTML
let timeSpend = document.querySelector(".time_spend") var fSubject = (50/timeSpend)*100; var sSubject = (25/timeSpend)*100; var tSubject = (25/timeSpend)*100; window.alert(fSubject);Esta es mi entrada HTML que tengo el tipo de número pero no sé por qué todavía no funciona
<input type="number" id="text-box" class="time_spend" placeholder="How much time do you have?" />Así es como puede hacerlo si desea que los porcentajes se vuelvan a calcular cuando cambie el valor en la entrada.
Estoy dando salida a los porcentajes en el html aquí solo como ejemplo
const timeSpendInput = document.querySelector(".time_spend") const fSubjectSpan = document.querySelector("#fSubject"); const sSubjectSpan = document.querySelector("#sSubject"); const tSubjectSpan = document.querySelector("#tSubject"); timeSpendInput.addEventListener("change", () => { const timeSpend = timeSpendInput.value; const fSubject = (50/timeSpend)*100; const sSubject = (25/timeSpend)*100; const tSubject = (25/timeSpend)*100; fSubjectSpan.innerHTML = fSubject; sSubjectSpan.innerHTML = sSubject; tSubjectSpan.innerHTML = tSubject; }) <input type="number" id="text-box" class="time_spend" placeholder="How much time do you have?" /> <br> <label>fSubject: <span id="fSubject"></span></label> <br> <label>sSubject: <span id="sSubject"></span></label> <br> <label>tSubject: <span id="tSubject"></span></label>Cuando desee obtener un valor de una entrada, debe usar .value en el elemento. Y cuando quiera hacer esto aún debe decidirse, ¿lo quiere en un envío o en un clic de botón? Este es un ejemplo usando un botón.
<!DOCTYPE html> <html lang="en"> <body> <input type="number" id="text-box" class="time_spend" placeholder="How much time do you have?" /> <button onclick="buttonClicked()">test</button> </body> <script> const buttonClicked = () => { let timeSpend = document.querySelector(".time_spend").value; console.log(timeSpend); var fSubject = (50 / timeSpend) * 100; var sSubject = (25 / timeSpend) * 100; var tSubject = (25 / timeSpend) * 100; window.alert(fSubject); }; </script> </html>