/ Dart

Dynamically change the content of a text element

I will tell you how to change the text dynamically using the example created in the previous post, in this tutorial i will be changing the text of the title to the input the user has entered.

.html

You will need to create a textbox to allow the user to input text.

html <input type="text" id="input">

This will create an input like below

.dart

In the main void you will need the following

void main()
{
	querySelector('#input').onInput.listen(update);
}

This passing the contents of input (the inputbox) to the void update which we will now create

void update (Event e)
{
	querySelector('#title').text = (e.target as InputElement).value;
} 

Compile

Now you can compile by pressing CTRL-R You will meet the Hello world title and now a inputbox.

Now when you enter text into the text box you will see that the text will change.

Since Dart allows you to dynamically alter content on a webpage this can be useful if you want to be able to dynamically change the contents of a text element.