Попытка получить внутреннее текстовое содержимое элемента span

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

Это довольно простая установка.

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

Затем я пытаюсь получить текстовое содержимое внутри и назначить его переменной txtValue, которую я затем проведу для проверки сравнения с фильтром.

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

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  console.info(content);
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content.innerHTML;
      console.info(textValue);
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class = "search-bar">
  <input type = "text" id = "search" onkeyup = "search()"placeholder = "Search for numbers">
</div>

<div id = "search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>

getElementsByTagName возвращает элемент, подобный массиву. Ни одного элемента (обратите внимание на Elementс). Поэтому вам нужно перебрать их, прежде чем вы сможете это сделать .innerHTML

— 27.05.2019 19:29

Я проглядел это, спасибо!

— 27.05.2019 19:34

javascript html

27.05.2019 19:27

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

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

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

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

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

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

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

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

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

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

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

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

774

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

Ответы 2

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

контент - это список узлов, и вам нужно получить доступ к индексу для доступа к узлу
вы определили переменную как txtValue в консоли, которую вы используете textValue

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content[i].innerHTML;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class = "search-bar">
  <input type = "text" id = "search" onkeyup = "search()"placeholder = "Search for numbers">
</div>

<div id = "search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>

27.05.2019 19:30

Возможно, вам нужно использовать:

txtValue = содержимое[i].innerHTML;

27.05.2019 19:32