Question

例如，当我在“提交”按钮中输入“早安”时。我应该能够在HTML网页上查看我的输入。

<input id="a"/>
<button type="submit" onclick="e()">Submit<button
<p id="k"></p>

Answer 1

在单击提交时调用一个函数，并获取输入框的值。使用.innerHTML将值附加到段落或div

function e()
{
document.querySelector('#k').innerHTML=document.querySelector('#a').value
}

<input id="a"/>
<input type="submit" onclick="e()" value="Submit">
<p id="k"></p>

Answer 2

目前还不清楚您要做什么，但是假设我正确地理解了。提交表单时，您想获取一个输入值并输出到 DOM 中。

您可以查看代码工作示例 here 。请注意，您可以通过更改参数在另一个输入中再次使用此功能。

const submitForm = (value, displayer) => {
	let input = document.getElementById(value);
	let valueHolder = document.getElementById(displayer);
	let inputValue = input.value;

	valueHolder.innerHTML = inputValue;
    input.value = '';
};

const form = document.getElementById('formSubmission');

form.addEventListener('submit', (e) => {
	e.preventDefault();
	submitForm('inputData', 'valueHolder');
});

<form id="formSubmission">
  <input type="text" placeholder="Enter something..." id="inputData" />
  <input type="submit" />
</form>

<h1 id="valueHolder"></h1>

通过单击提交按钮显示输入

2 个答案: