Text live update with Javascript 
Tags: html, javascript, webdev, tutorial
Published: 2021-02-06 09:40:17

`Hello World!` Today I will explain to you how to have a cool Text live update with Javascript (When user types text update in no time). Since I don't want to do a too-long article I will only focus on core functionality. Even so, I also want to show you some cool tricks at the end. But we've enough talked, now let's focus on the funniest, the code!

## Text live update with Javascript:

---

### First of all: HTML

```
<div class="container">
  <div class="autoUpdateText"></div>
</div>

<form action="/profile" id="form">
  <input type="text" id="input" placeholder="Write here">
</form>
```
I prefer to use a form input cause you can easily style it how you need. It's also easier to handle in Javascript. 

> If you want to know more about HTML form input read [this cool article](https://dev.to/devlorenzo/the-fabulous-list-of-all-form-input-types-48ig) (I recommend you to open it on a new page).

---
### This time CSS is crucial. We all agree that basic HTML inputs are awful and repellent

First we style containers:
```
body {
  font-family: "Alatsi", sans-serif;
  margin: 0;
  overflow: hidden;
  background: white;
  color: black;
}

#form {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.container {
  display: flex;
  justify-content: center;
}
```

Then text area (input) and text that will follow the input:
```
#input {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 600px;
  height: 200px;
  color: #444;
  font-size: 8em;
  background-color: #ddd;
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.autoUpdateText {
  display: inline-block;
  font-weight: 900;
  font-size: 3.5em;
  line-height: 1em;
  font-family: monospace;
}

.autoUpdateText:hover {
  border-bottom: 0.15em solid white;
// Add here some style on hover
}
```

---

### Last but not least, the star of the show, Javascript:
> Yes you're right, I used the same sentence [on this article](https://dev.to/devlorenzo/js-change-text-on-hover-3945).



Before we start the party, let's Caching the DOM:
> The results show that caching your DOM elements dramatically improves the speed of your code execution. This is clearly seen when comparing tests 3 and 4 where you get a boost from 32,889 to 602,620 operations per second. [Site Point](https://www.sitepoint.com/jquery-performance-dom-caching/#:~:text=The%20results%20show%20that%20caching,to%20602%2C620%20operations%20per%20second!)
```
const input = document.querySelector("#input");
const h1 = document.querySelector(".autoUpdateText");
const form = document.querySelector("#form");
countLetters = 0;
maxLineCharacters = 78;
```
You will see soon why I created countLetters and maxLineCharacters variables. 

Now we will add two event listener, first a prevent default to handle a possible user click on Enter:
```
form.addEventListener("submit", function (e) {
  e.preventDefault();
});
```
Then  an input event listener, everytime user enter a new letter code will run:
```
input.addEventListener("input", function (e) {
  countLetters = h1.innerHTML.length;
	if (countLetters < maxLineCharacters) {
		h1.innerHTML = input.value;
	} else if (countLetters % maxLineCharacters == 0 && countLetters != 0) {
		inputValue = input.value;
		h1.innerHTML += "<br>";
		row = h1.innerHTML;
		input.value = "";
		h1.innerHTML = row + inputValue;
  } else {
		h1.innerHTML = row + input.value;
	}
});
```
It may seem long and winding at first look, but I assure you that a line-by-line explanation will quickly make you understand. 

countLetters = h1.innerHTML.length;
First, we update countLetters variable to be the length of the h1 (where input will be displayed). We can't have a static variable (adding +1 every time user adds a letter) because we will change the length of the text to handle other possible errors. 

---

I added all the following code principally for two reasons, first because HTML text inputs have a limit of 100 characters and also because we need to perform some operations when a user writes a determined number of characters, such as adding a line break.


	if (countLetters < maxLineCharacters) {
		h1.innerHTML = input.value;
The first 78 (you can change this number above) characters will just update o client side, no difficulty. 
 
         } else if (countLetters % maxLineCharacters == 0
Check if countLetters is a multiple of 78 to be able to add a line break every 78 letters.  
`&& countLetters != 0)` I added this part to prevent the first character from not showing on an even number. 

`inputValue = input.value;`
First we save input value in a variable	

`h1.innerHTML += "<br>";`
Then we add a line break to the h1
	
`row = h1.innerHTML;`
We save h1 with line break in a variable 

`input.value = "";`
We clear input value (so user can type infinitely)

`h1.innerHTML = row + inputValue;`
And we update another time the h1 will all the variable before

  `else { h1.innerHTML = row + input.value; }`
Last part, when count is greater than 78 and not a multiple of 78 we display previous rows + new values entered.

> Simple as that, It's not data (rocket) science.
 
---

You can have here a live preview (in case you missed something):
[Click Me](https://codepen.io/DevLorenzo/pen/poNyjWN)

{% codepen https://codepen.io/DevLorenzo/pen/poNyjWN %}

---

> I think I will do another article on that, maybe telling you how to add a complete typewriter effect, how to capitalize all text when user checks a checkbox, or how to add a cursor effect when you write. If you're interested, be sure to smash that like button.

Hope this helped and thanks for reading!

---

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)

Or this one: [The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀](https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g)

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!