-2

How do I add an event listener to numerous buttons and determine the value of each based on which one is clicked? and after clicking, it will apply a style to the text in the textarea.

<div id="wrapper" class="text-2xl font-semibold space-x-4">
  <button id="bold-button">B</button>
  <button id="italic-button" class="italic">I</button>
  <button id="underline-button" class="underline">U</button>
</div>

**<textarea name="" id="textarea" cols="" rows="10">My Text</textarea>**

I am currently facing difficulties in applying styling to the contents within the textarea. This challenge arises from my inability to locate any pathways to connect the textarea when the button is clicked.

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }

  console.dir(event.target.id);

})
BK Uddin
  • 1
  • 1
  • What "difficulties" are you facing? What specifically have you tried and what specifically isn't working as expected? – David Aug 17 '23 at 12:45
  • 2
    You have solved the problem in the title - You need to rewrite the question and title to reflect your issue. You cannot style text in a textarea. You need a contenteditable div – mplungjan Aug 17 '23 at 12:53
  • 3
    I would say save yourself the headache and just use one of the many rich text editors out on the net. – epascarello Aug 17 '23 at 12:57
  • 1
    *that successfully resolves my first issue* then don't ask about that issue - word your question title+text to ask the question you want/need the answer to. This is very confusing. – freedomn-m Aug 17 '23 at 12:58

0 Answers0