He separado mi formulario en diferentes funciones y aunque cada una funciona, no encuentro la forma de usar el valor devuelto en la función total.
function adult() { let a = document.getElementById("adulte").value; let t = a * 100 document.getElementById("asub").innerHTML = t //document.getElementById("sub-a").value = t; console.log(t); document.getElementById("tprice").innerHTML = a; return t; } function total() { let a = adult(); document.getElementById("tprice").innerHTML = a; console.log(a); } <input id="adulte" name="adulte" style="width: 40px" onchange="adult();" /> <span id="aprice"> 100</span>$/nuit <p> Hébergements pour les adultes = <span id="asub">100</span>$</p> <button id="total" name="total" onclick="total();">calculate</button> <span id="tprice"> 50</span>$Creo que el siguiente código debería funcionar, pero recomiendo usar la etiqueta de form .
No desea activar adult() cada vez que cambie la entrada, lo que creo que es innecesario y redundante. todavía hay mucho espacio para la optimización del código, pero no quiero estropear su método de hacer las cosas.
También en html5, el evento onchange se activa en dos condiciones:
1. Al pulsar la tecla Intro
2. al perder el foco (en el desenfoque)
<html> <head> <script> function adult(input) { let a = input; document.getElementById('asub').innerHTML = a * 100; document.getElementById('tprice').innerHTML = a; return t; } function total(event) { let a = adult(event.target.value); document.getElementById('tprice').innerHTML = a; } </script> </head> <body> <input type="number" id="adulte" name="adulte" style="width: 40px" onchange="total(event)" min=0 /> <span id="aprice"> 100</span>$/unit <p>Hébergements pour les adultes = <span id="asub">100</span>$</p> <button id="total" name="total" onclick="total();">calculate</button> <span id="tprice"></span> </body> </html>Código Stackblitz agregado: haga clic aquí