使用 HTML/Javascript 将输入写入弹出窗口答案

【问题标题】：Write input to a popup window using HTML/Javascript使用 HTML/Javascript 将输入写入弹出窗口
【发布时间】：2020-07-19 22:45:12
【问题描述】：

我对 javascript 很陌生。使用这个提供的 HTML 脚本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Reverse Exercise</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
    />
  </head>
  <body class="bg-dark">
    <form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
      <h2 class="mt-2 mb-4">Reverse</h2>
      <div class="form-group w-50">
        <label for="input">Enter an 8-digit number: </label>
        <input type="number" class="form-control" id="input" required />
      </div>
      <div class="form-group mt-4">
        <input type="submit" class="btn btn-info" value="Reverse" />
      </div>
    </form>
    <script src="02-reverse.js"></script>
  </body>
</html>

在将输出写入弹出窗口之前，我需要接受输入并对其进行操作。我了解操作方面，但输入和输出让我感到困惑。我非常简单的代码根本不会产生任何弹出窗口或任何结果：

var num = document.getElementsById("input").value;
// do stuff to num
window.alert(num);

【问题讨论】：

var num = document.getElementById("input").value; ID 应该是唯一的。
在浏览器开发工具控制台 (F12) 中查看那里抛出的错误
很好，更近了，现在窗口生成了，但是里面没有出现num。
@steve 你这是什么意思？
如果您在页面加载时运行它，它将没有用户设置的值。你想要一个事件监听器来触发它

标签： javascript button io alert

【解决方案1】：

HTML

<form id="theForm">
  <h2>Reverse</h2>
  <div>
    <label for="theNumber">Enter an 8-digit number: </label>
    <input type="number" minlength="8" maxlength="8" min="10000000" max="99999999" id="theNumber" required autofocus />
  </div>
  <div>
    <input type="submit" value="Reverse" />
  </div>
</form>

JavaScript

var theForm = document.getElementById('theForm');
theForm.addEventListener('submit', function(event) {
  event.preventDefault();

  var theNumber = document.getElementById("theNumber").value;

  if (theNumber.length < 8 || theNumber.length > 8) {
    window.alert('Number must be 8 digits.');
  } else {
    // reverse number then display
    window.alert(theNumber);
  }

});

看看这个 Fiddle：https://jsfiddle.net/d8wa2n5h/

【讨论】：