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

Question

我对 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>

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

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

Answer 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/

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

Write input to a popup window using HTML/Javascript

javascript

io

alert

button