英文:
Difficulty in getting the output
问题
以下是您的JavaScript和HTML代码的翻译：
JavaScript代码部分：
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
function getSum() {
var sum = a + b;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
HTML代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div>
<label for="num1">输入数字 A：</label>
<input type="text" id="num1" />
</div>
<div>
<label for="num2">输入另一个数字 B：</label>
<input type="text" id="num2" />
</div>
<input type="button" value="A + B" id="answerBtn">
<br>
<div>
<input type="text" id="output" readonly />
</div>
</form>
<script src="interaction-simple.js" defer></script>
</body>
</html>
请注意，我已经将HTML和JavaScript代码中的HTML实体编码还原为正常的HTML标记和文本。如果您的代码中仍然存在问题（例如，输出为NaN），那么问题可能在于用户未正确输入数字或JavaScript文件中的其他问题。
英文:
Here is my Javascript file prompt.js:
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
function getSum() {
var sum = a + b;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
and here is the corresponding html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div>
<label for="num1">Enter a number A: </label>
<input type="text" id="num1" />
</div>
<div>
<label for="num2"> Enter another number B: </label>
<input type="text" id="num2" />
</div>
<input type="button" value="A + B" id = "answerBtn" >
<br>
<div>
<input type="text" id="output" readonly/>
</div>
</form>
<script src="interaction-simple.js" defer></script>
</body>
</html>
So there are two text fields in the page in which the user enters a number and the sum of the number is calculated upon clicking the button and the result is displayed in another text field just below the button.
When i enter the numbers the output is : NaN
in the output text field.
What's wrong with my code?
答案1
得分: 3
如果您在getSum函数内声明变量，它们将在调用函数时而不是在页面加载时填充，如下所示：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getSum() {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
var sum = a + b;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
<!-- language: lang-html -->
<form>
<div>
<label for="num1">输入数字 A： </label>
<input type="text" id="num1" />
</div>
<div>
<label for="num2"> 输入另一个数字 B： </label>
<input type="text" id="num2" />
</div>
<input type="button" value="A + B" id="answerBtn">
<br>
<div>
<input type="text" id="output" readonly/>
</div>
</form>
<!-- end snippet -->
请注意，以上是您提供的代码的翻译部分。
英文:
If you declare the variables inside the getSum function they are populated when called rather than at page load, like so:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getSum() {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
var sum = a + b;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
<!-- language: lang-html -->
<form>
<div>
<label for="num1">Enter a number A: </label>
<input type="text" id="num1" />
</div>
<div>
<label for="num2"> Enter another number B: </label>
<input type="text" id="num2" />
</div>
<input type="button" value="A + B" id="answerBtn">
<br>
<div>
<input type="text" id="output" readonly/>
</div>
</form>
<!-- end snippet -->
答案2
得分: 0
你的 a 和 b 变量在实际提供给文本字段之前已经被初始化。所以正确的解决方案是在事件触发时收集数据，而不是在页面加载时。你可以使用 @Professor Abronsius 的代码，或者你可以将 a 和 b 定义为文本字段而不是它们的值，然后在 sum 函数内访问数据。
let a = document.getElementById("num1");
let b = document.getElementById("num2");
function getSum() {
let v1 = parseFloat(a.value)
let v2 = parseFloat(b.value)
var sum = v1 + v2;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
英文:
Your a and b variables are initialized before the data is actually provided to text field. So the right solution is to gather data when the event is emitted and not when page is loaded. You can use @Professor Abronsius's code or alternativly you can define a and b as text fields and not their value, then inside the sum function access the data.
let a = document.getElementById("num1");
let b = document.getElementById("num2");
function getSum() {
let v1 = parseFloat(a.value)
let v2 = parseFloat(b.value)
var sum = v1 + v2;
document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
答案3
得分: 0
这是脚本中的问题，您在尝试访问输入字段的值时出现了问题。只需尝试在点击（CTA）按钮时访问输入字段的值。稍微重构了一下，并添加了对无效输入的处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<div>
<label for="num1">输入第一个数字：</label>
</div>
<input type="text" id="num1" />
<div>
<label for="num2">输入第二个数字：</label>
</div>
<input type="text" id="num2" />
<br />
<br />
<div>
<input type="button" value="计算" id="answerBtn" />
<input type="text" id="output" readonly />
</div>
</form>
<script>
const firstInput = document.getElementById("num1");
const secondInput = document.getElementById("num2");
const submitButton = document.getElementById("answerBtn");
function isInputValid(param) {
return Boolean(param.value.length);
}
function getSum() {
if (isInputValid(firstInput) && isInputValid(secondInput)) {
const sum = parseFloat(firstInput.value) + parseFloat(secondInput.value);
document.getElementById("output").value = sum;
// 提交表单后清空表单
firstInput.value = "";
secondInput.value = "";
} else {
alert("请输入有效的值。");
}
}
submitButton.addEventListener("click", getSum);
</script>
</body>
</html>
英文:
Actually,
Here is the issue in the script where you try to access the value of input fields.
Just try to access the value of the input field with the click of the (CTA) button.
Just refactored a bit & added handling for invalid inputs.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<div>
<label for="num1">Enter first Number: </label>
</div>
<input type="text" id="num1" />
<div>
<label for="num2"> Enter second number: </label>
</div>
<input type="text" id="num2" />
<br />
<br />
<div>
<input type="button" value="Evaluate" id="answerBtn" />
<input type="text" id="output" readonly />
</div>
</form>
<script>
const firstInput = document.getElementById("num1");
const secondInput = document.getElementById("num2");
const submitButton = document.getElementById("answerBtn");
function isInputValid(param) {
return Boolean(param.value.length);
}
function getSum() {
if (isInputValid(firstInput) && isInputValid(secondInput)) {
const sum = parseFloat(firstInput.value) + parseFloat(secondInput.value);
document.getElementById("output").value = sum;
// Clear form once submit the form
firstInput.value = "";
secondInput.value = "";
} else {
alert("Please enter valid values.");
}
}
submitButton.addEventListener("click", getSum);
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论