亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

未使用 Javascript 功能刪除芯片標簽

未使用 Javascript 功能刪除芯片標簽

小唯快跑啊 2022-05-26 15:31:33
我正在嘗試使用單詞作為標簽創建輸入,然后允許用戶刪除它們。每次單擊 X 時,我都會收到一條錯誤消息ReferenceError:刪除未定義我不確定我做錯了什么。我正在使用以下代碼:HTML:<div class="ingredients">  <ul id="list"></ul>  <input type="text" id="ingredients" placeholder="type and Enter ..."></div>Javascriptvar 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();}
查看完整描述

2 回答

?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

它看起來像訂購問題。為了安全起見,您可以使用對象來存儲全局函數。而不是使用href 使用onclick。


    function remove(i) {

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

      render();

    }

    function render() {

  list.innerHTML = '';

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

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

  });

}

// 所有函數


window.LIB = {

  remove:remove,

  render: render

}

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 remove(i) {

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

  render();

}

function render() {

  list.innerHTML = '';

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

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

  });

}

window.LIB = {

  remove:remove,

  render: render

}



window.onload = function() {

  render();

  txt.focus();

}

<div class="ingredients">

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

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

</div>


查看完整回答
反對 回復 2022-05-26
?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

您可以嘗試將ready功能添加到您的 javascript 文件嗎


$(document).ready(function(){

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

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

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

   .......

});


查看完整回答
反對 回復 2022-05-26
  • 2 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號