Входное значение - не определено или не отображается

Question

Я кодирую список приложений, но код javascript содержит некоторые ошибки. проблема в том, что когда появляется Ли, это «неопределенное» или иногда даже пустое пространство HTML

    <section>
    <div class="list-app">
        <ul id="list">
            <li>Hell</li>
        </ul>
        <div class="bottom">
            <input type="text" name="game"  placeholder="Type Your List">
            <img src="add.png" id="add">
            <img src="trash.jpg" id="remove">

        </div>
    </div>
</section>

и javascript

var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('LI');
var input = document.getElementsByName('game');
var items = [''];

add.addEventListener('click', function() {
  items.push = [input.value];

document.getElementById('list').innerHTML = '<li>' + items + '</li>';


})

не против другого кода, это просто копированная версия для кнопки добавления

Answer 1

Я думаю, что проблема в следующем коде. Это возвращает коллекцию NodeList ( MDN Ref ) document.getElementsByName ('game')

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

items.push(input[0].value);

Однако я думаю, что не рекомендуется использовать getElementsByName, я бы предпочел использовать getElementById и добавить атрибут id к элементу input.

также, если вы хотите вывести входное значение как отдельный элемент списка, используйте следующий код.

document.getElementById('list').innerHTML = items.map(item => '<li>' + item + '</li>');

надеюсь, это поможет!

Answer 2

Прочитайте мой комментарий. Вот что, я думаю, вы действительно хотите сделать:

//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(url, send, success, context){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(send instanceof FormData){
      x.send(send);
    }
    else{
      const fd = new FormData;
      for(let k in send){
        fd.append(k, JSON.stringify(send[k]));
      }
      x.send(fd);
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
aC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
// you can put all the below on a separate page in a load Event - besides the end load
const text_in = I('text_in'), list_add = I('list_add'), list = I('list');
function addText(){
  let v = text_in.value.trim();
  if(v !== ''){
    const li = M('li'), div = M('div'), remove = M('input');
    div.textContent = v; remove.type = 'button'; remove.value = 'remove'; aC(remove, 'remove');
    remove.onclick = ()=>{
      list.removeChild(li); text_in.focus();
    }
    li.appendChild(div); li.appendChild(remove); list.appendChild(li);
  }
  text_in.value = ''; text_in.focus();
}
list_add.onclick = addText;
text_in.onkeyup = e=>{
  if(e.key === 'Enter')addText();
}
}); // end load
//]]>

/* css/external.css */
*{
  padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
input,#list_adder>ul>li{
  font:bold 22px Tahoma, Geneva, sans-serif;  
}
input[type=text]{
  width:calc(100% - 75px); padding:3px 5px; border-radius:3px; 
}
input[type=button]{
  cursor:pointer; width:75px; background:linear-gradient(#1b7bbb,#147); color:#fff; padding:3px 0; border-radius:5px;
}
input[type=button].remove{
  position:absolute; right:5px; top:5px; background:linear-gradient(#b75757,#502323); font-size:14px;
}
#list_adder>ul{
  list-style:none;
}
#list_adder>ul>li{
  position:relative; background:#eee; padding:3px 5px; border:1px solid #000; margin-top:7px; border-radius:2px;
}
#list_adder>ul>li>div{
  display:inline-block; font-size:14px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <section id='list_adder'>
      <input id='text_in' type='text' placeholder='Add Something Here' /><input id='list_add' type='button' value='ADD' />
      <ul id='list'></ul>
    </section>
  </div>
</body>
</html>

Answer 3

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

В функции onclick вы ссылаетесь на этот массив. Ссылка на сам объект массива (а не на элементы в массиве или на строку всех элементов массива).

Я думаю, что вы нацеливаетесь на l oop через каждый элемент в массиве и создаете элемент li для каждого элемента массива, то есть что-то вроде:

document.getElementById('list').innerHTML = “”; // reset list
Items.forEach(function(item){
    document.getElementById('list').innerHTML += '<li>' + item + '</li>';
})

На моем телефонном аппарате, но я вернусь к правильному фрагменту, когда вернусь за свой рабочий стол.

Редактировать Добавлен фрагмент, показывающий эту работу. Это исправляет несколько опечаток в вопросе.

var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('li');
var input = document.getElementsByName('game');
var items = []; // this contained "". This made first item an empty string.

add.addEventListener('click', function() {
  console.log("Clicked");
  items.push(textPlace.value);
  // .push is a method: use (param) rather than = [param]
  // getElementsByName gets an array of elements. Can't get .value of multiple elements this way. QuerySelector gets single element, so input has been replaced with textPlace.

  document.getElementById('list').innerHTML = ""; // reset list
  items.forEach(function(item) {
    document.getElementById('list').innerHTML += '<li>' + item + '</li>';
  });
});

<section>
  <div class="list-app">
    <ul id="list">
      <li>Hell</li>
    </ul>
    <div class="bottom">
      <input type="text" name="game" placeholder="Type Your List">
      <img src="add.png" id="add">
      <img src="trash.jpg" id="remove">

    </div>
  </div>
</section>