Question

我想显示点击按钮＆＃34; Go＆＃34;时输入的输入值。输入值存储在名为＆＃34; value＆＃34;的变量中。并在id =＆＃34;显示＆＃34;。

中显示

＆＃13;

<html>
<head>
</head>

<body>

<div>
<input type="text" id="input" />
<button onclick="go()">Click</button>
</div>

<div id="show" style="display: none;">
<p>${value}</p>
</div>

<script>


function go() {
    document.getElementById('show').style.display = "block";
   let value = document.getElementById('input').value;
}
</script>
</body>

</html>

＆＃13;

Answer 1

您只需将要显示的元素的.textContent设置为变量即可。不需要隐藏/显示元素，因为元素.textContent一开始就是空的（因此它最初不会显示任何内容）。

＆＃13;

<html>
<head>
  <title>Using form data in the page</title>
</head>
<body>
  <div>
    <input type="text" id="input">
    <button onclick="go()">Click</button>
  </div>

  <div id="show"></div>

  <script>
    function go() {
      let value = document.getElementById('input').value;
      document.getElementById('show').textContent = value;
    }
  </script>
</body>
</html>

＆＃13;

Answer 2

使用type =＆＃34;按钮＆＃34;
使用值更新P，不隐藏和不显眼的事件处理：

＆＃13;

document.querySelector("#go").onclick=function() {
  document.querySelector('#show>p').textContent = document.getElementById('input').value;
}

＆＃13;

<div>
  <input type="text" id="input" />
  <button type="button" id="go">Click</button>
</div>

<div id="show">
  <p></p>
</div>

＆＃13;

如何在html中显示javascript变量的值？

2 个答案: