After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Is there a way to apply a highlight with a style of "background-color: aqua" in the textarea only to the word selected from the list above after clicking on it? See below for my HTML:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="box">
     <li>Add</li>
     <li>Sum</li>
     <li>Div</li>
     <li>Text4</li>
     <li>Text5</li>
</ul>
<textarea  rows="4" cols="50" id="id-of-your-textarea"></textarea>
 
</body>

And here is my script:

 <script>
const textArea = document.getElementById('id-of-your-textarea');
const boxLi= document.getElementById('box').children;

for(let i = 0; i < boxLi.length; i++){
  boxLi[i].addEventListener('click', () => {    
    textArea.value +=boxLi[i].textContent;  
  })
}
  </script>

Answer №1

Styling the content of a TextArea is not possible since it only contains text. However, you can use a <div> element to enter text that can be highlighted.

Give this a try:

<!doctype html>
<html lang="en">

<head>

  <style>
    .background{
    height:100px;
    width:500px;
    border:2px solid black;
  }
  </style>
</head>

<body>
  <ul id="box">
    <li>Add</li>
    <li>Sum</li>
    <li>Div</li>
    <li>Text4</li>
    <li>Text5</li>
</ul>
<div class="background" id="id-of-your-textarea" contenteditable>
 This is a Sum Add For the Text4 any random text 
</div>

</body>
<script>
const textArea = document.getElementById('id-of-your-textarea');
const boxLi= document.getElementById('box').children;

function highlighter(e)
{
  let text = e.target.textContent;
  let innerText = textArea.textContent;
  if(innerText) { 
    textArea.innerHTML = innerText.replace(text, `<span style="background-color:aqua;">${text}</span>`)
  }
}

for(list of boxLi)
  {
    list.addEventListener('click', highlighter)
  }
</script>

</html>

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

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language. index.html <!DOCTYPE html> <html lang="en"> <h ...

What sets apart the following: ( import React from "react"; ) and ( import React from 'react'; )?

When it comes to imports, is there a distinction between using single quotes (') versus double quotes ("), for example in import React from 'react'; and import React from "react";? Are there any notable differences? ...

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

Guide to verifying the property value following mocking a function: Dealing with Assertion Errors in Mocha

Based on a recommendation from a discussion on this link, I decided to mock the readFileSync function and then mocked my outer function. Now, my goal is to verify whether the variable's value has been set as expected. file.js const fs1 = require ...

Animating jQuery to adjust height based on a percentage

My animation using percentage is not working as expected. It expands to the whole height instantly instead of smoothly transitioning to 100%. Here is my CSS code: #block-views{ overflow:hidden; height:20px; } This is my HTML code: <div id="block-view ...

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

Retrieving XML data using jQuery and Ajax

Hey there! I am looking to extract information from an XML file. Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script type="text/javascript"> var xml; $(document).ready(function(){ ...

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

Form a collection of JavaScript arrays using a string that includes strings

Here is a string that needs to be converted into a JavaScript array: ['Value',2],['Value2',4],['Value3',10] To convert this to a JavaScript array, the following code can be used: var tmpStrings = "['Value',2],[&ap ...

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

the bootstrap data-target attribute is malfunctioning

I've been working on a website design with bootstrap, but for some reason, the data-target attribute isn't functioning as expected. Below is a snippet of my code: <button class="navbar-toggle" data-toggle="collapse" data-target=".navHea ...

Issue with Google Finance JSON response not functioning as expected in Chrome and Firefox browsers, yet appears to be working properly in

I am currently working on a JavaScript project that involves fetching STOCK data from the Google Finance API. When I manually paste the link into my browser, I can successfully retrieve the JSON response: // [ { "id": "22144" ,"t" : "AAPL" ,"e" : "NASDAQ ...

The type 'SVGPathSeg' cannot be assigned to type 'EnterElement' because the property 'ownerDocument' is not present in type 'SVGPathSeg'

I'm attempting to replicate this example using the d3-ng2-service service on Angular 5. Component: OnInit code: let d3 = this.d3; let d3ParentElement: Selection<HTMLElement, any, null, undefined>; let d3Svg: Selection<SVGSVGElement, any, n ...

Triggering jQuery Submit Form when Form is Modified

I need help with automatically submitting a form using jQuery when an input changes. The specific input I am working with is a date picker, and I want the form to be submitted as soon as a user makes a selection. <form id="select_date" name="select_da ...

Upon running the command "React + $ npm start," an error occurred with the code 'ERR_OSSL_EVP_UNSUPPORTED' related to opensslErrorStack

When running $npm start, an error is being thrown: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_ ...

What are the various ways to send data using Ajax to multiple elements?

script.js $(document).on("click", ".send", function (event) { $.ajax({ url: "update.php", data: { id: id, }, type: "POST", success: function (da ...

"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

I am currently developing a website and have chosen the font "PT Sans Narrow" for it. Unfortunately, it seems that Chrome and many other browsers do not support this font by default. Is there a way to include the PT Sans Narrow font with the website when ...

NextJS getStaticProps failing to pass fetched data to the page component

Struggling with passing props from getStaticProps function into template pages in NextJS. Below is the code for the dynamic page template that I am using. // src/pages/blog/[slug].js import React from 'react'; import matter from 'gray-matte ...

Middleware in Expressjs ensures that variables are constantly updated

I'm attempting to accomplish a straightforward task that should be clear in the code below: module.exports = function(req, res, next) { var dop = require('../../config/config').DefaultOptions; console.log(require('../../config/ ...

Creating a Build System for JavaScript in Sublime Text

While working on developing an application using node.js, I decided to create a JavaScript build system in Sublime Text 3 on my Ubuntu OS. I made a new build system file named nodey.sublime-build with the following contents: { "cmd": ["node","$file"," ...