将负数变为正数无效

我正在尝试获取用户的输入并检查它是正的还是负的。如果它是负的，我想让它是正的，如果它已经是正的，我就不去管它。然后我想显示它

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);
}
}

当我点击显示号码的按钮时，它显示NaN。我尝试了一些事情，比如改变函数名，看看是否有帮助。(我有一个问题，当命名一个函数点击在另一个项目)然而，没有工作。chrome inspect element调试工具也没有错误。

在你的javascript中，你的numbr(和negNumbr)变量是立即初始化的，而不是在函数运行时。

还有:你读了textarea的innerText，但是你应该使用textarea的value-属性。

我已经在下面修复了这两个问题，现在它可以工作了。

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>

您应该使用textarea的value属性，而不是innerText。

最重要的是，您应该只在单击按钮时检索值，因此将该部分移动到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>

您可以直接使用Math.abs

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>

我想添加一个稍微"优化"的"或缩写版

相关内容

最新更新

热门标签：