时间戳

首页 > 解决方案 > 通过赋值输出 HTML 元素的值

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

问题描述

我做了按钮教程和 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>

标签： javascripthtml

解决方案

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

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

推荐阅读