Как избавиться от лишних маркеров в моем неупорядоченном списке? - PullRequest
Новая
       27

Как избавиться от лишних маркеров в моем неупорядоченном списке?

0 голосов
/ 19 июня 2020

Привет, я печатаю массив в свою DOM, используя метод ввода. Я могу заставить пользователя распечатать список, но там слишком много маркеров. Вот мой код ниже: 

function addPokemon() {
    var pokemonName = document.getElementById("pokemon-name-container");
    pokemonName.innerHTML = document.getElementById("pokemon-names").value;

    for (var i = 0; i < element.length; i++) {
        if (typeof element[i].value !== "undefined") {
            pokemonArray.push(element[i].value);
        }
    }
    console.log(pokemonArray);
    for (var i = 0; i < pokemonArray.length; i++) {
        document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "<li>";
    }
}

var pokemonArray = [];
var element = document.getElementsByClassName("move-container");

Как это исправить? enter image description here

Добавлен, какой элемент был для тех, кто спрашивает

enter image description here

Ответы [ 2 ]

3 голосов
/ 19 июня 2020

Чтобы закрыть <li>, вам нужны /, 

document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";

Что происходит, так это то, что браузер автоматически закрывает ваш первый <li>, как только видит другой <li>. Затем он рассматривает этот другой <li> как другой элемент, автоматически закрывая его.

2 голосов
/ 19 июня 2020

Проблема в том, что вы не закрыли элемент элемента списка до того, как начали добавлять еще один. 

.innerHTML += "<li>" + pokemonArray[i] + "<li>"; // The 2nd one not closing...

Он неявно создает пустой элемент списка после каждого из те, которые вам нужны.

Пример

Я создал модель DOM, потому что вы ее не предоставили. 

const pokemonArray = [];
const element = document.querySelectorAll('.pokemon');

addPokemon();

function addPokemon() {
  var pokemonName = document.getElementById("pokemon-name-container");
  pokemonName.innerHTML = document.getElementById("pokemon-names").value;

  for (var i = 0; i < element.length; i++) {
    if (typeof element[i].value !== "undefined") {
      pokemonArray.push(element[i].value);
    }
  }
  console.log(pokemonArray);
  for (var i = 0; i < pokemonArray.length; i++) {
    document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";
  }
}
<input type="input" id="pokemon-names" />

<input type="text" class="pokemon" value="Bulbasaur" />
<input type="text" class="pokemon" value="Charmander" />
<input type="text" class="pokemon" value="Squirtle" />

<ul id="pokemon-name-container"></ul>

<ul id="pokemon-container"></ul>

Использование JavaScript для управления DOM

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

const POKEMON_NAMES = [ 'Bulbasaur', 'Charmander', 'Squirtle' ];

const state = {
  pokemon: []
};

let sel = document.querySelector('.available-pokemon');
sel.appendChild(new Option('', ''));
POKEMON_NAMES.forEach(name => sel.appendChild(new Option(name, name)));

sel.addEventListener('change', addPokemon);

function addPokemon(e) {
  let selectedPokemon = e.currentTarget.value;
  if (selectedPokemon.length > 0 && !state.pokemon.includes(selectedPokemon)) {
    state.pokemon.push(selectedPokemon);
    renderPokemonList();
  }
}

function renderPokemonList() {
  let container = document.querySelector('.pokemon-container');
  emptyElement(container);
  state.pokemon.sort().forEach(pokemon => {
    let listItem = document.createElement('LI');
    listItem.textContent = pokemon;
    container.appendChild(listItem);
  });
}

function emptyElement(element) {
  while (element.firstChild) {
    element.removeChild(element.lastChild);
  }
}
.pokemon-container {
  border: thin solid grey;
  min-height: 1em;
  width: 50%;
  padding: 0.5em 2em;
}
<select class="available-pokemon"></select>
<ul class="pokemon-container"></ul>
...