Question

单击输入（复选框）时，我希望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'){

  }
})

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

我不完全确定我理解您的问题，但您可以使用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;。

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

2 个答案: