Hi guys need some help- Input/Textarea

Hi guys so I am in the process of working on a page that requires that text typed into a custom box (input box) should immediately change the sample text across the page. It took me a while to get up to this point but I am not sure why my function is not working in order to provide the effect I have described above. This is what I have come up with:

function typesomething() {
const input = document.getElementById("type");  => this is the input box
const output = document.getElementById("sample"); => this is for the sample textarea boxes throughout the page

output.value = input.innerText;

I have attached my codepen for reference if what I have written above is confusing. Any help or direction would be greatly appreciate.




I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi @achristie0319,

One problem is that in valid HTML your id attribute values should be unique. All of the textareas that you’re trying to target have the same id="sample" and this won’t work the way you want it to.

I suggest looking at using document.qeurySelectorAll and try using that to get a reference to all of those textarea elements that you can then loop through to update the value.

One other issue is your use of input.innerText. If you console.log that value you’ll find it’s not quite correct. You may want to review the input type=text doc to see how to get the text you want from the text input element.

I took a look at your codepen, and I figured out why the ‘sample’ fields are not updating. I fixed part of the problem, but I figured I should leave the rest of the solution to you.

Here is my revision of your codepen: https://codepen.io/mundek/pen/poEjYzm

Your use of input.innerText was a problem; I changed it to input.value

Now, only the Century Gothic font sample updates. I believe this is because your Javascript uses getElementById, which only returns a single DOM node/object. You probably want to figure a way to get an array (or at least an iterable) object returned instead of only the first element that matches the ID you’re looking for.

I hope this helps.

Hey @mundek!
Welcome to the Forum!

1 Like

Thank you! I will definitely do this in the future.

Thank you so much, It was really helpful. I was not able to figure out how to do it in an array but I was able to make it work by writing it all out.


Thank you! I switched the id attritibutes on my textarea tags to make them more unique

1 Like