Changing h1 element based on input element content Vanilla JS Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Changing h1 element based on input element content Vanilla JS without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Why the h1 tag does not change? Is there anything wrong?

I tried it with alert and it worked perfectly. I mean whenever I typed into input box the alert message showed me the characters. but how about h1 tag? what did I do wrong?

Here is my snippet:

html {
  box-sizing: border-box;
  font-size: 2rem;
  font-family: 'Georama', sans-serif;
}
body {

  background-color: #555;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  align-items: center;
}

button {
  cursor: pointer;
}

.container {
  width: auto;
  height: 100px;
}

.te {
  display: block;
  color: white;
}
const text = document.getElementById('pps');

pass.addEventListener('input', (e) => {
  const val = e.target.value;
  text.innerHTML(val);
});
<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
      <script src="main.js" defer></script>
    </head>
    <body>
      <form class="container">
        <label>Type here:</label>
        <input
          type="text"
          placeholder="insert here.,.."
        />
      </form>
      <h1 class="te" id="pps">PP</h1>
    </body>
  </html>
</html>

Answer

I see two mistakes here:

  1. As it was mentioned in comments innerHTML is property, not a method, so should be called text.innerHTML = e.target.value;

  2. You didn’t assign anything to the ‘pass’ variable.

Also, there’s no sense to create the variable if you are going to use the value only once, so we can remove const val = e.target.value; and just use e.target.value directly.

I’ve attached the working snippet below.

const text = document.getElementById('pps')

document.getElementById('textInput').addEventListener('input', (e) => {
  text.innerHTML = e.target.value;
});
<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js" defer></script>
</head>

<body>
  <form class="container">
    <label>Type here:</label>
    <input type="text" id="textInput" placeholder="insert here..." />
  </form>
  <h1 class="te" id="pps">PP</h1>
</body>

</html>

</html>
We are here to answer your question about Changing h1 element based on input element content Vanilla JS - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji