Question

我在这个问题上停留了很长时间，大约3天。我无法解脱，似乎找不到相关的帮助。我做了按钮教程和HTML Selector教程，但似乎无法使它正常工作...任何指针都将非常感谢。请不要只给我我想意识到自己错误的答案。

这是我的代码，很抱歉，这里太乱了……这里有很多不相关的代码。

目标

目标是获取每个<li>标记并为它们分配一个按钮，以将其文本输出到Javascript控制台。好像要说的是，您单击了此按钮，因此选择了裤子。

JS

list[x].innerHTML += ('<button onClick="console.log('+list[x].innerHTML+');">Select Item</button>');

let storedListValue = [];
let y = 0,
  x = 0;

function outputTargetValues() {
  let list = document.querySelectorAll("li");
  console.log(list.length);
  while (x < list.length) {
    storedListValue.push(list[x].innerHTML);
    console.log(storedListValue[x] + " This is storedListValue Data");
    //console.log(list[x].innerHTML);
    list[x].innerHTML += ('<button onClick="console.log(' + list[x].innerHTML + ');">Select Item</button>');
    //console.log(list[x]);
    y++;
    x++;
  }
}

function output(itemName) {
  console.log(itemName);
}

function callMeOutput() {
  console.log(y);
  return storedListValue[x];
}

<h3>Shirts</h3>
<ul id='list'>
  <li id='i1'>Biker Jacket</li>
  <li id='i2'>Mens Shirt</li>
</ul>

<button onClick="outputTargetValues();">Test</button>

Answer 1

如果要在单击第一个按钮时打印列表元素的文本，则需要更改此行：

list[x].innerHTML += ('<button onClick="console.log(\'' + list[x].innerHTML + '\');">Select Item</button>');

代码的问题在于，结果的输出类似于console.log(Mens Shirt)，这是语法错误。使用我现在提供的代码，该字符串带有引号，因此没有错误。

let storedListValue = [];
let y = 0,
  x = 0;

function outputTargetValues() {
  let list = document.querySelectorAll("li");
  console.log(list.length);
  while (x < list.length) {
    storedListValue.push(list[x].innerHTML);
    console.log(storedListValue[x] + " This is storedListValue Data");
    list[x].innerHTML += ('<button onClick="console.log(\'' + list[x].innerHTML + '\');">Select Item</button>');
    y++;
    x++;
  }
}

function output(itemName) {
  console.log(itemName);
}

function callMeOutput() {
  console.log(y);
  return storedListValue[x];
}

<h3>Shirts</h3>
<ul id='list'>
  <li id='i1'>Biker Jacket</li>
  <li id='i2'>Mens Shirt</li>
</ul>

<button onClick="outputTargetValues();">Test</button>

我建议您在遇到此类错误时检查HTML输出，并尝试查看是否存在语法错误。这可能对您将来的项目有帮助：）

Answer 2

主要问题是此行button onClick="console.log(' + list[x].innerHTML + ')。 onclick需要一个函数名，但是您试图在此处运行javascript代码。

第二，始终避免编写内联JavaScript。

您还需要将eventlistener附加到buttons，只有在创建按钮并将其添加到dom后才能执行此操作。

在此代码段中，在while循环之后添加了button的事件侦听器。

也

let storedListValue = [];
let y = 0,
  x = 0;
document.getElementById('otTargetVal').addEventListener('click', outputTargetValues)

function outputTargetValues() {
  let list = document.querySelectorAll("li");
  while (x < list.length) {
    storedListValue.push(list[x].innerHTML);
    //using template literals and dataset to store the value
    console.log(storedListValue[x] + " This is storedListValue Data");
    list[x].innerHTML += `<button data-val ='${list[x].innerHTML}'>Select Item</button>`;
    y++;
    x++;
  }
  document.querySelectorAll('button').forEach((item) => {
    item.addEventListener('click', function() {
      console.log(this.dataset.val)
    })
  })
}

function output(itemName) {
  console.log(itemName);
}

function callMeOutput() {
  console.log(y);
  return storedListValue[x];
}

<h3>Shirts</h3>
<ul id='list'>
  <li id='i1'>Biker Jacket</li>
  <li id='i2'>Mens Shirt</li>
</ul>

<button type="button" id="otTargetVal">Test1</button>

Answer 3

您必须在控制台参数中加上引号。您可以使用Template literals，它允许嵌入表达式，并且更加简单易用。我还建议您在值为文本时使用textContent而不是innerHTML，因为它更快，更可靠。

更改

('<button onClick="console.log(' + list[x].innerHTML + ');">Select Item</button>');

收件人

`<button onClick='console.log("${list[x].textContent}")'>Select Item</button>`

let storedListValue = [];
let y = 0, x = 0;

function outputTargetValues(){
  let list = document.querySelectorAll("li");
  console.log(list.length);
  while(x < list.length){
    storedListValue.push(list[x].textContent);
    console.log(storedListValue[x] + " This is storedListValue Data");
    var v = list[x].textContent;
    list[x].innerHTML += `<button onClick='console.log("${v}")'>Select Item</button>`;
    y++;
    x++;
  }
}
function output(itemName){
  console.log(itemName);
}

function callMeOutput(){
  console.log(y);
  return storedListValue[x];
}

<h3>Shirts</h3>
<ul id='list'>
  <li id='i1'>Biker Jacket</li>
  <li id='i2'>Mens Shirt</li>
</ul>

<button onClick="outputTargetValues();">Test</button>

通过分配HTML元素的输出值

目标

JS

3 个答案: