如何将e.target存储在变量中？

Question

单击输入（复选框）后，我希望文本区域具有2px的纯绿色边框。 用户可以添加更多复选框和德克萨斯州。 问题是如何将texarea存储在变量中然后设置样式？ 码

 <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

我使用nextSibling解决您的问题：

 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

我不确定我是否理解您的问题，但是您可以使用outerHTML存储元素的HTML：

let yourVariable = e.target.outerHTML;

然后，您可以创建一个新元素，将其附加到DOM，并将其HTML设置为yourVariable 。