我正在嘗試接受用戶的輸入并檢查它是正面還是負面。如果它是負面的，我想把它變成正面的，如果它已經是正面的，我只想離開它。然后我想顯示它。
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。我已經嘗試了一些方法，例如更改函式名稱以查看是否有幫助。（我在另一個專案中命名一個函式 click 時遇到了問題）但是，沒有任何效果。chrome檢查元素除錯工具中也沒有錯誤。
uj5u.com熱心網友回復：
該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>uj5u.com熱心網友回復：
在您的 javascript 中，您的numbr(and negNumbr) 變數會立即初始化，而不是在函式運行時初始化。
另外：您閱讀了innerTexttextarea 的 ，但您應該使用 textarea 的value-property。
我已經在下面解決了這兩個問題，現在可以使用了。
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>uj5u.com熱心網友回復：
你可以簡單地使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329262.html
標籤：javascript html