解释 Javascript 中的输入

Question

我在 replit.com 中编写了一些 HTML 代码。

如果我问的问题很愚蠢，请原谅，因为我是 HTML & JS 的新手。

我希望用户在输入字段中输入内容并单击“单击我”按钮。我希望按钮将其文本更改为用户键入的任何内容。但相反，它只是一片空白。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <label for="text">Type Some Text:</label><br>
    <input type="text" id="type" name="text"><br><br>
    <button type="button" style="background-color: khaki; margin-left: 20px; padding-left: 30px; border: solid 5px; border-radius: 40px; padding-right: 450px; font-size: 18px" onclick="Click()" id="click">Click Me!</button>
    <script>
      function Click() {
        text = document.getElementById("type").innerHTML;
        document.getElementById("click").innerHTML = text;
      }
    </script>
  </body>
</html>

Answer 1

https://codepen.io/jacobcambell/pen/OJjyoWW

这里有几点需要考虑。

首先，要获取HTML输入的值，需要使用.value而不是.innerHTML，例如：

text = document.getElementById("type").value;

接下来，（可选）您可以调用 alert() 而不是 window.alert()，因为大多数浏览器都知道如何正确处理它。

最后，要更改您的按钮，您需要将按钮的内部 HTML 设置为您的 text 变量，现在您只需将其设置为 "text"这是 JavaScript 中的 string。你真的让你的按钮说“文本”

此外，我建议使用 let 在这里声明变量。

您的 Click 函数的最终版本可能如下所示：

function Click() {
    let text = document.getElementById("type").value;
    alert(text)
    document.getElementById("click").innerHTML = text;
}

Answer 2

使用这个：

function Click() {
        text = document.getElementById("type").value;
        document.getElementById("click").innerHTML = text;
      }

另外，你也可以这样使用：

function Click() {
        document.getElementById("click").innerHTML = document.getElementById("type").value
}

解释 Javascript 中的输入

Interpreting Input in Javascript

html

javascript

input

button