I'm looking to utilize this script to generate multiple buttons that insert content into a textarea. How can

Question

I'm looking to utilize this script to generate multiple buttons that insert content into a textarea. How can

Finally, I stumbled upon a script that enables undo/redo functionality for programmatically inserted text. You can find it here.

If you want to check out the original script demo, click here.

Here is the initial script:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// http://stackoverflow.com/a/9851769/529024
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
...

textarea {
  padding: 10px;
  font-family: Calibri;
  ...
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name='textArea' class='textArea' rows="7" cols="50">Suspendisse convallis, metus ... viverra condimentum, neque neque tincidunt diam, nec vestibulum neque nisi...

javascript html jquery css google-chrome

Answer 1

Answer №1

The issue you are facing is that both textAreas have the same 'id' which is 'codearea1'

If I understood your question correctly, you have a total of 80 textAreas and buttons. Each button should fill a specific textArea when clicked. Therefore, it is important to assign a unique 'id' to each textArea similar to how you have done for buttons.

If I were in your shoes, I would simplify the code further by assigning attributes like 'class' and 'id' to each button, as well as an 'id' to each textArea with mapping in the JavaScript.

For example:

In HTML:

<div id='n101' class="fillTextBtn">n101 button</div>
 <div id='n102' class="fillTextBtn">n102 button</div>

In JavaScript:

<script>

    var mapObj = {
       'n101': 'text1',
       'n102': 'text2'
    }

    jQuery(".fillTextBtn").on("click", function(event) {
       var currButtonId = jQuery(event.target).attr('id');
       var mappedText = mapObj[currButtonId];

       jQuery("#codearea1").focus();
       document.execCommand('insertText', false, mappedText);
    });
</script>

This approach eliminates the need to separately bind events to each button and simplifies other operations as well. It avoids repetitive code.

I hope this explanation helps you streamline your code.

Fiddle: https://jsfiddle.net/q6rugcvb/

Update:

The current behavior is due to the fact that the first script tag sets 'text' as 'text1' while the second script tag sets 'text' as 'text2'.

Therefore, when you click on a button, 'text' becomes 'text2'.

To achieve the desired result, simply include this line inside your click function:

var text = 'text1';

For instance:

 jQuery("#n101").on("click", function() {
     var text = 'text1';

Answer 2

The issue you are facing is that both textAreas have the same 'id' which is 'codearea1'

If I understood your question correctly, you have a total of 80 textAreas and buttons. Each button should fill a specific textArea when clicked. Therefore, it is important to assign a unique 'id' to each textArea similar to how you have done for buttons.

If I were in your shoes, I would simplify the code further by assigning attributes like 'class' and 'id' to each button, as well as an 'id' to each textArea with mapping in the JavaScript.

For example:

In HTML:

<div id='n101' class="fillTextBtn">n101 button</div>
 <div id='n102' class="fillTextBtn">n102 button</div>

In JavaScript:

<script>

    var mapObj = {
       'n101': 'text1',
       'n102': 'text2'
    }

    jQuery(".fillTextBtn").on("click", function(event) {
       var currButtonId = jQuery(event.target).attr('id');
       var mappedText = mapObj[currButtonId];

       jQuery("#codearea1").focus();
       document.execCommand('insertText', false, mappedText);
    });
</script>

This approach eliminates the need to separately bind events to each button and simplifies other operations as well. It avoids repetitive code.

I hope this explanation helps you streamline your code.

Fiddle: https://jsfiddle.net/q6rugcvb/

Update:

The current behavior is due to the fact that the first script tag sets 'text' as 'text1' while the second script tag sets 'text' as 'text2'.

Therefore, when you click on a button, 'text' becomes 'text2'.

To achieve the desired result, simply include this line inside your click function:

var text = 'text1';

For instance:

 jQuery("#n101").on("click", function() {
     var text = 'text1';

I'm looking to utilize this script to generate multiple buttons that insert content into a textarea. How can

Answer №1

Similar questions

Creating a UI Component when clicking on something

Comparing PHP's STRCHR with the equivalent function in JavaScript

Forming a ring around a character within a header one element

Create a line graph overlaying an area chart

The interaction between MVC Razor and JQuery while utilizing a data table encounters an Uncaught TypeError: the undefined element is

Struggling to prevent keyboard-triggered date changes in the MUI DatePicker API

Use Enums instead of conditions in Typescript

After the reconnect, the `socketInstanceRef.current.readyState` transitions to 3 and does not render any other components

What are some methods to improve the performance of this jQuery-powered webpage?

Node 14 introduces a new feature that allows modules to be imported using absolute paths for native ES6 modules

Ways to incorporate AngularJS variable within a JavaScript function

Problems arising from positioning elements with CSS and organizing list items

Header position displays incorrectly in Internet Explorer due to CSS

Error encountered in Internet Explorer 11 - Access is forbidden - XMLHttpRequest

The error message states: `discord.js TypeError: Unable to access the property 'resolve' as it is undefined`

Refresh database using ajax requests

Measuring JSON data with PHP through asynchronous requests

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

Import MDX metadata in Next.js on the fly

Creating websites with HTML and CSS