Strangely unusual issues with text input boxes

So I've set up two textareas with the intention of having whatever is typed in one appear simultaneously in the other. But despite my best efforts, it's not working as expected. Here's the code snippet:

<script>
function copyText () {
    var inputText = document.getElementById('inputText').value;
    var displayText = document.getElementById('displayText');
    displayText.innerHTML = inputText;
}
</script>

<textarea cols="20" rows="20" id="inputText" onKeyUp="copyText();"></textarea>
<textarea cols="20" rows="20" id="displayText"></textarea>

I'm at a loss here - nothing seems to be transferring over to the second textarea. Any insights would be greatly appreciated!

Answer №1

It is recommended to utilize the value attribute instead of the innerHTML property for the second textarea element.

=== UPDATE ===

Avoid using the word type as a function name in JavaScript, as it is a reserved keyword.

Answer №2

<script>
function displayText() {
    var userInput = document.getElementById('userInput').value;
    var output = document.getElementById('output');
    output.value = userInput; // update the displayed text
}
</script>

Remember to use .value instead of .innerHTML

Answer №3

The only problem you're facing is related to the function name.

Answer №4

It seems like your code has a few issues. Here is an improved version:


    <script type="text/javascript">
function typeWriter() {

    var textValue = document.getElementById("text").value;

    var codeOutput = document.getElementById("code");
    codeOutput.value = textValue;
}
</script>
<body>
<textarea cols="20" rows="20" id="text" onkeyup="typeWriter()"></textarea>
<textarea cols="20" rows="20" id="code"></textarea>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to accessing Realm(JavaScript) object in an asynchronous manner and integrating it with various services

I have incorporated the following code into my project to open Realm asynchronously and integrate it with services. RmProfile.js: import Realm from 'realm'; const PrflSchema = { name: 'Profile', primaryKey: 'id', prope ...

The if-else statement is providing a misleading outcome

While working on my map using leaflet, I decided to implement a dynamic color concept based on input data. However, despite comparing 3 sets of data to ensure accuracy, some parts of the color scheme are displaying incorrect results. Below is the snippet o ...

Error: The "res.json" method is not defined in CustomerComponent

FetchData(){ this.http.get("http://localhost:3000/Customers") .subscribe(data=>this.OnSuccess(data),data=>this.OnError(data)); } OnError(data:any){ console.debug(data.json()); } OnSuccess(data:any){ this.FetchData(); } SuccessGe ...

The function setState() is not performing as expected within the useEffect() hook

After retrieving data from my Mongo database, it's returned as an object within the useEffect hook function, specifically in the response. I then initialize a state called myorders with the intention of setting its value to the data fetched from the A ...

Separate modules in the Webpack.mix.js file don't produce any output files in the public folder

I've recently been tackling a Laravel project with an extensive webpack.mix.js file residing in the root directory, boasting nearly 5000 lines of code. In an effort to enhance organization and maintainability, I've opted to break it down into ind ...

Ways to test the initial launch of an Android application using Cordova

I am developing an Android application using Cordova. My app consists of multiple pages, with the main homepage being index.html. I need to determine if it is the first time a user lands on the homepage after opening the app, regardless of how many times ...

The scrollTop feature fails to function properly following an Axios response

I'm currently facing a challenge with creating a real-time chat feature using Laravel, Vue.js, Pusher, and Echo. The issue arises while implementing the following 3 methods: created() { this.fetchMessages(); this.group = $('#group') ...

Unable to remove spaces in string using Jquery, except when they exist between words

My goal is to eliminate all white spaces from a string while keeping the spaces between words intact. I attempted the following method, but it did not yield the desired result. Input String = IF ( @F_28º@FC_89º = " @Very strongº " , 100 , IF ( @F_28 ...

Extract specific nested elements

Looking for assistance with extracting specific nested objects from a series structured like so: data = {"12345":{"value":{"1":"2","3":"4"}}, {"12346":{"value":{"5":"6","7":"8"}}, {"12347":{"value":{"9":"0","11":"22"}} In need of creating a functio ...

Tips for efficiently saving data using await in Mongoose

Currently, the code above is functional, but I am interested in utilizing only async/await for better readability. So, my query is: How can I convert cat.save().then(() => console.log('Saved in db')); to utilize await instead? The purpose of ...

What is the best way to trigger actions from child components within React Redux?

My server contains the following code snippet: <ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider> The <Layout> component includes more nested components. Further dow ...

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

Right-click context menu not working properly with Internet Explorer

Seeking assistance with extracting the URL and title of a website using JavaScript. The script is stored in a .HTM file accessed through the registry editor at file://C:\Users\lala\script.htm Below is the script: <script type="text/java ...

Showing the outcome of a PHP function within a div container

While working on my WordPress site, I've implemented user registration and login functionality. However, I'm not a fan of the default 'admin bar' and would rather create a custom navigation bar. I am looking for a way to dynamically loa ...

What is the reason behind the decision for Google Chart API to display a legend only for pie charts

I have encountered an issue while attempting to display a pie chart on an ASP.NET webpage using the provided URL: . Despite passing valid values in the URL parameters, only the legend of the chart is displayed and not the chart itself. Can anyone provide i ...

Concealing buttons and Enabling others using ajax

I am facing a situation where I need to modify the behavior of a modal window on my webpage. The modal currently has two buttons for confirmation and cancellation, as shown in the code snippet below. Inside this modal, there is a <div class = "resp"> ...

The function angular.factory does not exist

Hey there! I am encountering an error in the title related to my factory. Any suggestions on how I can resolve this issue? (function (angular,namespace) { var marketplace = namespace.require('private.marketplace'); angular.factory(&apo ...

Can someone provide guidance on creating a JavaScript function that locates an image within an <li> element and sets that image as the background-image property in the li's CSS?

Let's dive deeper into this concept: <li class="whatever"> <img src="/images/clients/something.jpg"> </li> <li class="whatever"> <img src="/images/clients/whatever.png"> </li> He ...

Retrieve the element's value in relation to a different parent element

[JavaScript] How can I access the value of a textbox related to a button through jQuery? The event is triggered when the .button-action is clicked <td class="dmsInput"> <input type="text" maxlength="4" size="4" class="d"> </td> <td& ...