JavaScript读取input输入值修改按钮文本出现空白问题求解

问题原因 #

你代码的核心错误是读取输入框内容时误用了innerHTML属性：

• <input>属于自闭合单标签，不存在嵌套的内部HTML内容，用户在输入框中键入的内容都会存储在value属性中
• 你读取innerHTML拿到的是空值，才会导致点击后按钮变成空白

修正后的代码 #

只需要修改Click函数里的取值逻辑即可：

<!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() {
        // 改innerHTML为value即可
        let text = document.getElementById("type").value;
        document.getElementById("click").innerHTML = text;
      }
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者EmmaGao8