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.
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.
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.
