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

Question

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>

_"This is what I have so far"_ - A syntax error doesn't really help to solve this assignment. — Andreas, Feb 21 '22 at 17:38
I know, I just don't know what to write after .textContent, that is why the error occurs — Ida M. Paasche, Feb 21 '22 at 17:39
Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). Inline event handlers like `oninput` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Read a proper [JS tutorial](//developer.mozilla.org/docs/Web/JavaScript/Guide). — Sebastian Simon, Feb 21 '22 at 18:35

score 1 · Accepted Answer · answered Feb 21 '22 at 17:48

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>

score 0 · Answer 2 · answered Feb 21 '22 at 17:49

0

Try changing your script to this:

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

answered Feb 21 '22 at 17:49

Mike Irving

1,480
1
12
20

score 0 · Answer 3 · answered Feb 21 '22 at 17:51

0

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

answered Feb 21 '22 at 17:51

Nabed Khan

22
4

score 0 · Answer 4 · answered Feb 21 '22 at 17:51

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>

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

4 Answers4