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

时间:2018-06-19 01:13:08

标签: javascript dom

单击输入(复选框)时,我希望textarea的边框为2px绿色常亮。 用户可以添加更多复选框和texareas。问题是如何将texarea存储在变量中然后进行样式设置呢? 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'){

  }
})

2 个答案:

答案 0 :(得分:0)

我使用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>

答案 1 :(得分:0)

我不完全确定我理解您的问题,但您可以使用local function dummy() end local start = os.clock() for i=1,n do dummy() end -- loop/call overhead local overhead = os.clock() - start local start = os.clock() for i=1,n do f() end local time = os.clock() - start - overhead 存储元素的HTML:

outerHTML

然后,您可以创建一个新元素,将其附加到DOM,并将其HTML设置为let yourVariable = e.target.outerHTML;