使用 JavaScript 从 HTML 表单获取用户输入

Question

我创建了一个接受两个文本输入的表单：第一个数字和第二个数字。 我试图获取用户给出的输入并计算它的总和，但我无法这样做。

HTML：

<form action="">
  <label for="fnum">first Number:</label>
  <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br />
  <label for="snum">second num:</label>
  <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br />
  <!-- <label for="btn">Button</label> -->
  <button id="btn" onclick="ad(a,b)">add</button>
</form>

JavaScript：

a = document.querySelector("#fnum").value;

b = document.querySelector("#snum").value;
const ad = (a, b) => (c = a + b);
document.write(c);

Answer 1

1. 页面加载后不能使用 document.write。 它将擦除页面
2. 您需要一个事件来触发求和，并且在事件处理程序中您需要获取值，而不是在它之外
3. 我将值添加到 span 元素中，以便我可以在提交时重置表单

 window.addEventListener("load", function() { // page load document.getElementById("form1").addEventListener("submit", e => { // better than the button click e.preventDefault(); // stop submission const a = document.getElementById("fnum").value; const b = document.getElementById("snum").value; document.getElementById("result").innerHTML = `${a}+${b} = ${+a + +b}`; // cast to number - I use template literals to create a string e.target.reset(); // clear the form }) })

 <form id="form1"> <label for="fnum">first Number:</label> <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br /> <label for="snum">second num:</label> <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br /> <button>add</button> </form> <span id="result"></span>

Answer 2

document.write将更改整个 body ，而不是使用您在提交时编辑的单独元素。

此外，由于.value返回一个字符串，我们需要将这些值转换为整数以将它们加在一起，因此c = +a + +b 。

const ad = (a, b) => (c = a + b); 没有多大意义，它定义了一个函数， let c = +a + +b; 应该没事。

 function ad(event) { // Prevent form submit event.preventDefault(); // Get fields let a = document.querySelector("#fnum").value; let b = document.querySelector("#snum").value; // Sum let c = +a + +b; // Show document.getElementById('sum').innerHTML = 'Sum: ' + c; // Reset form event.target.parentNode.reset() }

 <form action=""> <label for="fnum">first Number:</label> <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br /> <label for="snum">second num:</label> <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br /> <!-- <label for="btn">Button</label> --> <button id="btn" onclick="ad(event)">add</button> </form> <em id='sum'></em>

Answer 3

要添加其他人已经发布的内容，现在习惯于将addEventListener添加到元素而不是使用内联函数调用。 在这里，我使用了一个名为handleClick的函数，该函数在单击按钮时被调用，并将缓存的输入元素的值（从它们的字符串强制转换为数字）附加到页面上的div而不是使用document.write 。

如果您的脚本位于 HTML 的head ，请将其移动到</body>标记之前，以便 DOM 可以加载并且 JavaScript 可以缓存加载的元素。

 // Cache the elements const button = document.querySelector('button'); const result = document.querySelector('#result'); const a = document.querySelector('#fnum'); const b = document.querySelector('#snum'); // Add an event listener to the button that calls the function button.addEventListener('click', handleClick, false); function handleClick(e) { // Prevent the form from submitting e.preventDefault(); // Display the result result.textContent = Number(a.value) + Number(b.value); };

 <form> <label for="fnum">first Number:</label> <input type="number" id="fnum" name="fnum" placeholder="first num" /><br /><br /> <label for="snum">second num:</label> <input type="number" id="snum" placeholder="second num" name="snum" /><br /><br /> <button id="btn">add</button> </form> <div id="result" />

Answer 4

您需要在事件处理程序中添加write调用。 此外，如果在表单中使用按钮，您应该使用提交事件。 此外，您需要在添加整数值之前先对它们进行解析，因为它们将被视为字符串连接。

我还将使用 JavaScript 将处理程序附加到表单以访问事件对象。 这允许您在将内容写入页面后防止表单的默认提交导航离开。

 const form = document.forms['calc']; const handleSubmit = (e) => { e.preventDefault(); const [ fnum, snum ] = form.elements, result = parseInt(fnum.value, 10) + parseInt(snum.value, 10); document.write(result); }; form.addEventListener('submit', handleSubmit);

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; } form { display: grid; grid-template-columns: 1fr; grid-row-gap: 0.25em; } label { display: grid; grid-template-columns: 7em 1fr; }

 <form name="calc"> <label for="fnum"> First number: <input type="number" id="fnum" name="fnum" placeholder="First number..." /> </label> <label for="snum"> Second number: <input type="number" id="snum" name="snum" placeholder="Second number..." /> </label> <button id="btn">Add</button> </form>