javascript - 通过赋值输出 HTML 元素的值

Question

我学习了按钮教程和 HTML 选择器教程，但似乎无法让它发挥作用。请不要只给我答案，我要认识到我的错误。

这是我的代码:

目标

目标是取每个<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 输出，并尝试查看是否存在任何语法错误。这可能会对您 future 的项目有所帮助:)