How do i store the e.target in a variable?

Question

When the input(checked box) is clicked I want the textarea to have a border 2px solid green. The user can add more checkboxes and texareas. The problem is how to I store the texarea in a variable to then style it? CODE

 <div class="container">
    <h1 class="title">Question 1</h1>
    <textarea type="checkbox" name="question" id="q1" cols="30" rows="5">How old am I?</textarea> <br><br>
    <input type="checkbox"><textarea class='ans' type="checkbox" name="question"  cols="30" rows="5">Whay is your name</textarea> <br><br>
    <input type="checkbox"><textarea class='ans'type="checkbox" name="question"  cols="30" rows="5">What is your name</textarea> <br><br>
    <input type="checkbox"><textarea class='ans'type="checkbox" name="question" cols="30" rows="5">Whatv</textarea> <br><br>
    <button onclick="getButton()">Add an option</button>
  </div>

JAVASCRIPT

let button = document.querySelector('button');
let container = document.querySelector('.container');
let textArea;
let getButton = () => {
  // create input
  const input = document.createElement('input');
  // add type to input
  input.type = 'checkbox';
  // create textarea
  textArea = document.createElement('textarea');
  // add name to textArea
  textArea.name = 'question';
  // add className
  textArea.className = 'ans'
  // cols
  textArea.cols = 30;
  // rows
  textArea.rows = 5;
  // insert into the container
  container.insertBefore(input, button)
  container.insertBefore(textArea, button)  
}

container.addEventListener('click', function(e){
  test = e.currentTarget.tagName;
  if(e.target.value === '' && e.target.tagName === 'TEXTAREA'){
    console.log('I am empty');
  } else if(e.target.tagName === 'TEXTAREA'){
    console.log(e.target.value);
  }
})

container.addEventListener('click', function(e){
  if(e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA'){

  }
})

Answer 1

I use nextSibling to solve you probelm:

 let button = document.querySelector('button'); let container = document.querySelector('.container'); let textArea; let getButton = () => { // create input const input = document.createElement('input'); // add type to input input.type = 'checkbox'; // create textarea textArea = document.createElement('textarea'); // add name to textArea textArea.name = 'question'; // add className textArea.className = 'ans' // cols textArea.cols = 30; // rows textArea.rows = 5; // insert into the container container.insertBefore(input, button) container.insertBefore(textArea, button) } container.addEventListener('click', function(e){ test = e.currentTarget.tagName; if(e.target.value === '' && e.target.tagName === 'TEXTAREA'){ console.log('I am empty'); } else if(e.target.tagName === 'TEXTAREA'){ console.log(e.target.value); } else if(e.target.tagName === 'INPUT'){ e.target.nextSibling.style.border = e.target.checked? '2px solid green' : ''; } }) 

 <div class="container"> <h1 class="title">Question 1</h1> <textarea type="checkbox" name="question" id="q1" cols="30" rows="5">How old am I?</textarea> <br><br> <input type="checkbox"><textarea class='ans' type="checkbox" name="question" cols="30" rows="5">Whay is your name</textarea> <br><br> <input type="checkbox"><textarea class='ans'type="checkbox" name="question" cols="30" rows="5">What is your name</textarea> <br><br> <input type="checkbox"><textarea class='ans'type="checkbox" name="question" cols="30" rows="5">Whatv</textarea> <br><br> <button onclick="getButton()">Add an option</button> </div> 

Answer 2

I'm not entirely sure I understand your question, but you can store the HTML of the element using outerHTML :

let yourVariable = e.target.outerHTML;

You can then create a new element, append it to the DOM, and set its HTML to yourVariable .