使用 javascript 在 div 中显示输入字段值

Question

我有一个按钮，当我点击它时会显示一个表单，它有输入字段名称，我试图在提交表单后在另一个 div 中显示输入字段值。但我做不到。我做错了什么？

<!DOCTYPE html>
<html>
  <head>
   <script>
        function showDiv() {
            document.getElementById('hello').style.display = "block";
        }
        function showValue(){
            var name = document.getElementById('name').value;
            document.getElementById('ans').innerHTML = name;
        }
   </script>
  </head>
  <body>
    <input type="button" onclick="showDiv()" value="click on me"/>  
    <form id="hello"  style="display:none;">
        <label>Enter Name: </label><br>
        <input type="text" id="name" required>
        <input type="submit" value="submit" onclick="showValue()">
    </form>
    <div id="ans"></div>
  </body>
</html>

请帮助我，在此先感谢。

Answer 1

该值实际出现在 div 中，但您的表单会立即提交。逃避的一种方法是不使用提交按钮。将 input[type=submit] 更改为 button[type=button]。

这将阻止提交表单。

function showDiv() {
  document.getElementById('hello').style.display = "block";
}

function showValue() {
  var name = document.getElementById('name').value;
  document.getElementById('ans').innerHTML = name;
  document.getElementById('hello').style.display = "none";
}

<input type="button" onclick="showDiv()" value="click on me" />
<form id="hello" style="display:none;">
  <label>Enter Name: </label><br>
  <input type="text" id="name" required>
  <button type="button" onclick="showValue()">submit</button>
</form>
<div id="ans"></div>

Answer 2

function showDiv() {
  document.getElementById('hello').style.display = "block";
}

function showValue() {
  var name = document.getElementById('name').value;
  document.getElementById('ans').innerHTML = name;
  document.getElementById('hello').style.display = "none";
}

<input type="button" onclick="showDiv()" value="click on me" />
<form id="hello" style="display:none;">
  <label>Enter Name: </label><br>
  <input type="text" id="name" required>
  <button type="button" onclick="showValue()">submit</button>
</form>
<div id="ans"></div>

使用 javascript 在 div 中显示输入字段值

show input field value in div using javascript

javascript

html

forms

html-input