Estoy tratando de tomar la entrada de un usuario y verificar si es positiva o negativa. Si es negativo quiero hacerlo positivo, si ya es positivo solo quiero dejarlo. Entonces quiero mostrarlo.
CSS:
h1, h2, textarea, button, div { display: flex; justify-content: center; }HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div> <h1>Positive Converter</h1> </div> <br> <div> <h2 id="convertedNumberDisplay"></h2> </div> </div> <div> <div> <textarea id="txtnum"></textarea> </div> <div> <button onclick="convertTheNumber()">Convert to Positive</button> </div> </div> </body> </html>JavaScript:
var numbr = document.getElementById("txtnum").innerText; var negNumbr = parseFloat(numbr) * -1 function convertTheNumber() { if (parseFloat(numbr) < 0) { document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr); } else { document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr); } }Cuando hago clic en el botón para mostrar el número, muestra NaN. Probé algunas cosas, como cambiar los nombres de las funciones para ver si eso ayudaba. (Tuve un problema al nombrar una función, haga clic en otro proyecto) Sin embargo, nada funcionó. Tampoco hay errores en la herramienta de depuración de elementos de inspección de Chrome.
El área de textarea tiene una propiedad de value que debe usar, en lugar de innerText .
Además de eso, solo debe recuperar el valor al hacer clic en el botón, así que mueva esa parte a la función convertTheNumber .
function convertTheNumber() { var numbr = document.getElementById("txtnum").value; var negNumbr = parseFloat(numbr) * -1 if (parseFloat(numbr) < 0) { document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr); } else { document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div> <h1>Positive Converter</h1> </div> <br> <div> <h2 id="convertedNumberDisplay"></h2> </div> </div> <div> <div> <textarea id="txtnum"></textarea> </div> <div> <button onclick="convertTheNumber()">Convert to Positive</button> </div> </div> </body> </html>En su javascript, su variable numbr (y negNumbr ) se inicializa inmediatamente, no cuando se ejecuta la función.
Además: lee el innerText del área de texto, pero debe usar el value de la propiedad del área de texto.
He solucionado estos dos problemas a continuación, y ahora funciona.
function convertTheNumber() { var numbr = parseFloat(document.getElementById("txtnum").value); var negNumbr = -numbr if (parseFloat(numbr) < 0) { document.getElementById("convertedNumberDisplay").innerText = parseFloat(negNumbr); } else { document.getElementById("convertedNumberDisplay").innerText = parseFloat(numbr); } } h1, h2, textarea, button, div { display: flex; justify-content: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div> <h1>Positive Converter</h1> </div> <br> <div> <h2 id="convertedNumberDisplay"></h2> </div> </div> <div> <div> <textarea id="txtnum"></textarea> </div> <div> <button onclick="convertTheNumber()">Convert to Positive</button> </div> </div> </body> </html> function showAbsoluteValue() { const absoluteValue = Math.abs( parseFloat( document.getElementById("txtnum").value ) ) document.getElementById("convertedNumberDisplay").innerText = absoluteValue; } <h1>Absolute value: <span id="convertedNumberDisplay"></span></h1> <textarea id="txtnum"></textarea> <button onclick="showAbsoluteValue()">Show absolute value</button>Simplemente podría usar Math.abs en su lugar
const txtnum = document.getElementById('txtnum'), convertedNumberDisplay = document.getElementById('convertedNumberDisplay'); function convertTheNumber() { const number = +txtnum.value; convertedNumberDisplay.textContent = isNaN(number) ? '' : Math.abs(number); } h1, h2, textarea, button, div { display: flex; justify-content: center; } <div> <div> <h1>Positive Converter</h1> </div> <div> <h2 id="convertedNumberDisplay"></h2> </div> </div> <div> <div> <textarea id="txtnum"></textarea> </div> <div> <button onclick="convertTheNumber()">Convert to Positive</button> </div> </div>