时间戳

首页 > 解决方案 > 如何使用文本输入字段从数组中添加和删除项目

javascript - 如何使用文本输入字段从数组中添加和删除项目

问题描述

我正在尝试制作一个简单的购物清单程序。有一个添加项目和一个删除项目按钮。还有一个文本框。例如，当您在文本字段中输入“apples”并点击添加按钮时。然后，添加按钮应将“苹果”放入杂货列表数组中，然后在标有杂货信息的 div 区域中显示苹果。

删除按钮也不起作用。例如，如果在文本字段中输入的值是“苹果”，则列表中有五个不同的项目。应该找到苹果，然后将其取出。然后，groceryList 数组应重新显示并显示包含不包含已删除项目的数组。

<body>
    My grocery list
    <br>
    <br>
    <div id="groceryinfo"></div>
    <br>
    <br>
    <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" />
    <br>
    <input id="Button2" type="button" value="Remove this item" onclick="Remove()" />
    <script>
        var groceryList = [];
        var groceryitem;
        var description;
        description = document.getElementById("groceryinfo");

        function Add() {
            groceryitem = document.getElementById('Text1').value;
            groceryList.push(groceryitem);
            groceryList = description;
            
        }

        function Remove() {
            for (var i = 0; i <= groceryList.length; i++) {
                if (groceryList[i] == groceryitem) groceryList.splice(i, 1);
                groceryList = description;
            }
        }
    </script>

标签： javascripthtml

解决方案

您可以通过以下方式实现此目的document.getElementById("groceryinfo").innerHTML：

<body>
    My grocery list
    <br>
    <br>
    <div id="groceryinfo"></div>
    <br>
    <br>
    <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" />
    <br>
    <input id="Button2" type="button" value="Remove this item" onclick="Remove()" />
    <script>
        var groceryList = [];
        var groceryitem;
        var description;
        description = document.getElementById("groceryinfo");

        function Add() {
            groceryitem = document.getElementById('Text1').value;
            groceryList.push(groceryitem);
            document.getElementById("groceryinfo").innerHTML = groceryList.toString();
        }

        function Remove() {
            for (var i = 0; i <= groceryList.length; i++) {
                if (groceryList[i] === groceryitem) {
                    groceryList.splice(i, 1);
                    document.getElementById("groceryinfo").innerHTML = groceryList.toString();
                } 
            }
        }
    </script>

推荐阅读