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

I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.

This is what I have so far

<!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>

CodePudding user response：

You passed the value (newtext) to your function but never used it:

<!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>

CodePudding user response：

Try changing your script to this:

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

CodePudding user response：

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

CodePudding user response：

The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for 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>