使用 onclick 函数从 forLoop 元素获取属性答案

【问题标题】：Getting an attribute from a forLoop element using onclick function使用 onclick 函数从 forLoop 元素获取属性
【发布时间】：2020-05-17 01:27:12
【问题描述】：

我还想通过使用带有“onclick”属性的 getAttribute 来获取 forLoop 元素的值。但我得到的已经是最终价值。您如何在单击的确切值元素上获得每个循环的值？这是我的代码；

const btn = document.createElement('button');
const scrOutput = document.createElement('p');
const numbers = ['0','1','2','3','4','5','6','7','8','9'];

// For Loop Condition
for (let i=0; i<numbers.length; i++) {
  btn.setAttribute('onclick', 'showOutput()');
  btn.setAttribute('value', numbers[i]);
  btn.innerText = numbers[i];
  document.getElementById('numbers').innerHTML += btn.outerHTML;
  const x = btn.getAttribute('value', numbers[i]);
  console.log(x);  
}

function showOutput(){
  const btnVal = btn.getAttribute('value');
  scrOutput.innerText = btnVal;
  document.getElementById('screen').innerHTML = scrOutput.outerHTML;
  console.log(btnVal);
}

【问题讨论】：

const btnVal = btn.getAttribute('value'); 只获取最后一个值集，即 9
您的 for 循环在同一个按钮上设置了 10 次相同的属性。你想达到什么目的？你是不是想先创建 10 个单独的按钮？
是的。我首先创建了按钮。然后每个按钮都有一个 eventListener 将显示在#screen 上。

标签： javascript arrays getattribute

【解决方案1】：

好的，我已将您的代码更改为按预期工作

const btn = document.createElement('button');
const scrOutput = document.createElement('p');
const numbers = ['0','1','2','3','4','5','6','7','8','9'];

// For Loop Condition
for (let i=0; i<numbers.length; i++) {
  // by adding `this` as an argument you make sure to pass the clicked button to the code inside the listener
  btn.setAttribute('onclick', 'showOutput(this)');
  btn.setAttribute('value', numbers[i]);
  btn.innerText = numbers[i];
  document.getElementById('numbers').innerHTML += btn.outerHTML;
  const x = btn.getAttribute('value', numbers[i]);
  console.log(x);  
}

function showOutput(element) {
  // here the element is given on each click
  const btnVal = element.value;
  scrOutput.innerText = btnVal;
  document.getElementById('screen').innerHTML = scrOutput.outerHTML;
  console.log(btnVal);
}

<div id="numbers"></div>
<div id="screen"></div>

这是一个干净的代码，可以做你想做的事

const numbersElement = document.querySelector("#numbers"),
  screenElement = document.querySelector("#screen"),
  numbers = ['0','1','2','3','4','5','6','7','8','9'];
// looping over numbers array and create a new button and add it to numbers element
numbers.forEach(function(number) {
  numbersElement.innerHTML += `<button value="${number}">${number}</button>`;
});
// using event delegation instead of looping over the buttons
numbersElement.onclick = function(e) {
  if(e.target.nodeName === "BUTTON") {
    screenElement.innerHTML = e.target.value;
  }
};

<div id="numbers"></div>
<div id="screen"></div>

【讨论】：

【解决方案2】：

您需要告诉showOutput() 函数单击了哪个按钮。所以将按钮引用发送到该函数并将其用作btn

const btn = document.createElement('button');
const scrOutput = document.createElement('p');
const numbers = ['0','1','2','3','4','5','6','7','8','9'];

// For Loop Condition
for (let i=0; i<numbers.length; i++) {
  btn.setAttribute('onclick', 'showOutput(this)');
  btn.setAttribute('value', numbers[i]);
  btn.innerText = numbers[i];
  document.getElementById('numbers').innerHTML += btn.outerHTML;
  const x = btn.getAttribute('value', numbers[i]);
  //console.log(x);  
}

function showOutput(btn){
  const btnVal = btn.getAttribute('value');
  scrOutput.innerText = btnVal;
  document.getElementById('screen').innerHTML = scrOutput.outerHTML;
  //console.log(btnVal);
}

<div id="screen">

</div>
<div id="numbers">

</div>

【讨论】：

【解决方案3】：

你需要将一个事件传递给showOutput()函数，这样你就可以通过e.target.value获取被点击按钮的值。目标事件属性返回触发事件的元素。

const btn = document.createElement('button');
const scrOutput = document.createElement('p');
const numbers = ['0','1','2','3','4','5','6','7','8','9'];

// For Loop Condition
for (let i=0; i<numbers.length; i++) {
  btn.setAttribute('onclick', 'showOutput(event)');
  btn.setAttribute('value', numbers[i]);
  btn.innerText = numbers[i];
  document.getElementById('numbers').innerHTML += btn.outerHTML;
  const x = btn.getAttribute('value', numbers[i]);
  console.log(x);  
}

function showOutput(e){
  const btnVal = btn.getAttribute('value');
  scrOutput.innerText = e.target.value;
  document.getElementById('screen').innerHTML = scrOutput.outerHTML;
  console.log(btnVal);
}

【讨论】：