Выходное значение HTML-элемента путем присвоения

Я делал обучающие программы по кнопкам и HTML-селектору и просто не могу заставить это работать. Пожалуйста, не просто дайте мне ответ, я хочу осознать свою ошибку.

Вот мой код:

Цель

Цель состоит в том, чтобы взять каждый тег <li> и назначить им кнопку, которая выводит их текст в консоль Javascript. Как бы говоря, вы нажали эту кнопку, следовательно, вы выбрали Штаны.

JS

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

let storedListValue = [];
let y = 0,
  x = 0;

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

function output(itemName) {
  console.info(itemName);
}

function callMeOutput() {
  console.info(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>

javascript html

28.10.2018 06:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Если вы хотите распечатать текст элемента списка при нажатии на первую кнопку, вам нужно изменить эту строку:

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

Проблема с вашим кодом заключалась в том, что результат был похож на console.info(Mens Shirt), что является синтаксической ошибкой. С кодом, который я предоставил сейчас, в строке есть кавычки, поэтому ошибки нет.

let storedListValue = [];
let y = 0,
  x = 0;

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

function output(itemName) {
  console.info(itemName);
}

function callMeOutput() {
  console.info(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-вывод, когда вы получите такую ошибку, и попытаться увидеть, есть ли синтаксическая ошибка. Это может помочь вам в ваших будущих проектах :)

Эхх ... Спасибо .. искал подсказки, но это помогает. Так что это? Я вижу, вы добавили \'' и \'

— 28.10.2018 07:09

ОХХХХХХ. Омг ... Я совершенно это пропустил ... Я столько раз читал этот код, и это была простая синтаксическая опечатка ... бххх ..

— 28.10.2018 07:13

Это одинарная кавычка, я добавил ее с обратной косой чертой \ , чтобы я мог использовать ее внутри строки. Вы можете получить дополнительную информацию здесь

— 28.10.2018 07:14

Я не мог действительно проверить этот код, потому что мой колледж позволял мне запускать код только в их онлайн-идеале или редакторе кода ... как бы они это ни называли ... Большое спасибо ...

— 28.10.2018 07:15

28.10.2018 07:03

Основная проблема - это линия button onClick = "console.info(' + list[x].innerHTML + '). onclick ожидает имя функции, но вы пытаетесь запустить здесь код javascript.

Во-вторых, всегда избегайте написания встроенного javascript.

Вам также необходимо прикрепить eventlistener к buttons, вы можете сделать это только после того, как кнопки будут созданы и добавлены в дом.

В этом фрагменте кода прослушиватель событий для button добавляется после цикла while.

Также т

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.info(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.info(this.dataset.val)
    })
  })
}

function output(itemName) {
  console.info(itemName);
}

function callMeOutput() {
  console.info(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>

28.10.2018 07:10

Вы должны заключить параметр консоли в кавычки. Вы можете использовать Литералы шаблона, который позволяет использовать встроенные выражения, более простой и легкий в использовании. Я также предлагаю вам использовать textContent вместо innerHTML, когда значение - текст, так как это быстрее и надежнее.

Изменять

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

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

let storedListValue = [];
let y = 0, x = 0;

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

function callMeOutput(){
  console.info(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>

28.10.2018 07:39