在 Javascript 中解释输入答案

【问题标题】：Interpreting Input in Javascript在 Javascript 中解释输入
【发布时间】：2021-12-03 06:55:59
【问题描述】：

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

【问题讨论】：

使用.value 获取输入的值，而不是.innerHTML。
谢谢！它现在工作！请把这个放在答案中，这样我就可以标记你；）
我一般不会为此类微不足道的错误发布答案。我只是投票关闭作为一个错字。

标签： javascript html button input

【解决方案1】：

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

这里有几点需要考虑。

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

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

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

最后，要更改您的按钮，您需要将按钮的 innerHTML 设置为您的 text 变量，现在您只需将其设置为等于 "text"，即 JavaScript 中的 string。你实际上是在让你的按钮说“文本”

另外，我建议使用let 在此处声明您的变量。

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

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

【讨论】：

【解决方案2】：

使用这个：

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

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

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

【讨论】：