未使用 Javascript 功能删除芯片标签

Question

我正在尝试使用单词作为标签创建输入，然后允许用户删除它们。每次单击 X 时，我都会收到一条错误消息

ReferenceError：删除未定义

我不确定我做错了什么。我正在使用以下代码：

HTML：

<div class="ingredients">

  <ul id="list"></ul>

  <input type="text" id="ingredients" placeholder="type and Enter ...">

</div>

Javascript

var txt = document.getElementById('ingredients');

var list = document.getElementById('list');

var items = ['PHP', 'React.js', 'WordPress'];

txt.addEventListener('keypress', function(e) {

  if (e.key === 'Enter') {

    let val = txt.value;

    if (val !== '') {

      if (items.indexOf(val) >= 0) {

        alert('Tag name is a duplicate');

      } else {

        items.push(val);

        render();

        txt.value = '';

        txt.focus();

      }

    } else {

      alert('Please type a tag Name');

    }

  }

});

function render() {

  list.innerHTML = '';

  items.map((item, index) => {

    list.innerHTML += `<li><span>${item}</span><a href="javascript: remove(${index})">X</a></li>`;

  });

}

function remove(i) {

  items = items.filter(item => items.indexOf(item) != i);

  render();

}

window.onload = function() {

  render();

  txt.focus();

}

Answer 1

它看起来像订购问题。为了安全起见，您可以使用对象来存储全局函数。而不是使用href 使用onclick。&nbsp; &nbsp; function remove(i) {&nbsp; &nbsp; &nbsp; items = items.filter(item => items.indexOf(item) != i);&nbsp; &nbsp; &nbsp; render();&nbsp; &nbsp; }&nbsp; &nbsp; function render() {&nbsp; list.innerHTML = '';&nbsp; items.map((item, index) => {&nbsp; &nbsp; list.innerHTML += `<li><span>${item}</span><a href="javascript: LIB.remove(${index})">X</a></li>`;&nbsp; });}// 所有函数window.LIB = {&nbsp; remove:remove,&nbsp; render: render}var txt = document.getElementById('ingredients');var list = document.getElementById('list');var items = ['PHP', 'React.js', 'WordPress'];txt.addEventListener('keypress', function(e) {&nbsp; if (e.key === 'Enter') {&nbsp; &nbsp; let val = txt.value;&nbsp; &nbsp; if (val !== '') {&nbsp; &nbsp; &nbsp; if (items.indexOf(val) >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; alert('Tag name is a duplicate');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; items.push(val);&nbsp; &nbsp; &nbsp; &nbsp; render();&nbsp; &nbsp; &nbsp; &nbsp; txt.value = '';&nbsp; &nbsp; &nbsp; &nbsp; txt.focus();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert('Please type a tag Name');&nbsp; &nbsp; }&nbsp; }});function remove(i) {&nbsp; items = items.filter(item => items.indexOf(item) != i);&nbsp; render();}function render() {&nbsp; list.innerHTML = '';&nbsp; items.map((item, index) => {&nbsp; &nbsp; list.innerHTML += `<li><span>${item}</span><a href="javascript: void 0" onclick="LIB.remove(${index})">X</a></li>`;&nbsp; });}window.LIB = {&nbsp; remove:remove,&nbsp; render: render}window.onload = function() {&nbsp; render();&nbsp; txt.focus();}<div class="ingredients">&nbsp; <ul id="list"></ul>&nbsp; <input type="text" id="ingredients" placeholder="type and Enter ..."></div>

Answer 2

您可以尝试将ready功能添加到您的 javascript 文件吗$(document).ready(function(){&nbsp; &nbsp;var txt = document.getElementById('ingredients');&nbsp; &nbsp;var list = document.getElementById('list');&nbsp; &nbsp;var items = ['PHP', 'React.js', 'WordPress'];&nbsp; &nbsp;.......});