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

February 21, 2022

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>

>Solution :

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>