如何使 h1 更改为输入中写入的内容？

Question

我有一个作业，我必须将 h1 更改为输入中写入的任何内容。我必须通过使用 getElementByID 创建一个函数来做到这一点。

这是我目前所拥有的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>

<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />

<script>
    function changeh1(newtext) {
        document.getElementById("Header").textContent=
    }
</script>
</body>
</html>

Answer 1

您将值 (newtext) 传递给了您的函数但从未使用它：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Text</title>
    </head>
   
    <body>
    <h1 id="Header">Change header</h1>
    <p>Use the input to change the header.</p>
    <input type="text" oninput="changeh1(this.value)" />

    <script>
        function changeh1(newtext) {
            document.getElementById("Header").textContent=newtext;
        }
    </script>
    </body>
    </html>

Answer 2

尝试将您的脚本更改为：

function changeh1(newtext) {
    document.getElementById("Header").innerText = newtext;
}

Answer 3

<script>
  function changeh1(newtext) {
    document.getElementById("Header").textContent = newtext;
  }
</script>

Answer 4

textContent API 可用于获取和设置节点的文本内容。在您的原始代码中，您没有设置要修改的节点的内容（header，h1）。要修复它，只需将它设置为您定义的回调函数的参数即可。在 DOM 中，您将 this.value 作为 newtext

的参数传递

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>

<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />

<script>
  function changeh1(newtext) {
    document.getElementById("Header").textContent = newtext
  }
</script>
</body>
</html>

如何使 h1 更改为输入中写入的内容？

How to make the h1 change to the what is written in an input?

html

javascript

input

getelementbyid