Hay un problema que he encontrado pero no puedo encontrar una explicación hasta ahora. El código es el siguiente:
let textbox = document.getElementById("textbox"); let result = document.getElementById("result"); function convertToCm() { value = textbox.value; result.innerText = +value * 2.54; document.body.appendChild(result); } <input id="textbox" type="text"> <button onclick="convertToCm()">Convert to cm</button> <div id="result">result</div> En la segunda línea de la función, traté de usar textbox.innerText en su lugar, sin embargo, esto me da un resultado de 0 de cualquier número que coloque en el cuadro de texto. En la tercera línea, también traté de usar result.value en su lugar, pero luego generaría el mismo número que puse en el cuadro de texto. Estoy realmente confundido.
He intentado buscar en un motor de búsqueda pero no he encontrado una explicación hasta ahora. ¿Qué puedo probar a continuación?
Para obtener o establecer el valor del campo de entrada, debemos usar .value mientras escribe textbox.value que es correcto.
<input id="textbox" type="text"> Para obtener o establecer el valor de los elementos comunes (podría ser cualquier elemento/etiqueta), usamos .innerText mientras escribe result.innerText que es correcto.
<div id="result">result</div> Además, no necesita document.body.appendChild(result); línea en su código.
Su cuadro de textbox se refiere a un HTMLInputElement (o <input> ), que es un elemento vacío . Como tal, su .innerText siempre es una cadena vacía.
Convertir una cadena vacía en un número se evaluará como cero.
En su lugar, use .value para leer o escribir en el valor de un control de formulario (los controles de formulario son, por ejemplo, <input> , <select> , <textarea> ).
Para leer o escribir el texto de un elemento no vacío, use .innerText (o preferiblemente .textContent , porque leerlo no provoca un reflujo ). El result de su variable hace referencia a un HTMLDivElement, un elemento no vacío.
En la segunda línea, actualiza result.innerText . Esto se reflejará en el DOM inmediatamente.
Debido a que el result ya existe en el DOM y se actualiza como desea, en realidad no es necesario volver a agregarlo.
Retroalimentación:
Recomiendo mantener la funcionalidad puramente en su <script> (o archivo JS) para la mantenibilidad. El uso de los atributos HTML de onevent está (normalmente) en desuso . En su lugar, use addEventListener() :
options para el oyente.window.event .