html 输入名称数组

📌 相关文章

📜 html 输入名称数组 - Html (1)

📅 最后修改于: 2023-12-03 14:41:56.953000 🧑 作者: Mango

简介

本文将介绍如何利用HTML编写一个程序，用于输入并展示一个名称数组。

准备工作

在编写程序之前，请确保您已掌握以下知识：

HTML的基本语法和标签
JavaScript的基本语法和数组操作

代码示例

以下是一个使用HTML和JavaScript编写的简单示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>输入名称数组</title>
    <script>
        window.onload = function() {
            var names = [];
            
            function addName() {
                var input = document.getElementById('nameInput');
                var name = input.value;
                
                if(name !== '') {
                    names.push(name);
                    input.value = '';
                }
                
                displayNames();
            }
            
            function displayNames() {
                var displayArea = document.getElementById('displayArea');
                displayArea.innerHTML = '';
                
                if(names.length > 0) {
                    var ul = document.createElement('ul');
                    
                    names.forEach(function(name) {
                        var li = document.createElement('li');
                        li.innerHTML = name;
                        ul.appendChild(li);
                    });
                    
                    displayArea.appendChild(ul);
                } else {
                    displayArea.innerHTML = '数组为空';
                }
            }
            
            var addButton = document.getElementById('addButton');
            addButton.addEventListener('click', addName);
        }
    </script>
</head>
<body>
    <h1>输入名称数组</h1>
    <input type="text" id="nameInput" placeholder="输入名称">
    <button id="addButton">添加名称</button>
    
    <div id="displayArea"></div>
</body>
</html>

代码解析

首先，使用JavaScript创建一个空的名称数组names。
接下来，定义一个addName函数，用于从输入框中获取名称，并添加到数组中。添加完成后，调用displayNames函数来展示数组内容。
displayNames函数根据数组的长度展示不同的结果。如果数组为空，则显示"数组为空"；否则，创建一个无序列表，将数组中的名称逐个添加到列表项中，并将列表添加到展示区域中。
最后，通过获取按钮的引用，并使用addEventListener方法为按钮添加点击事件监听器。当按钮被点击时，执行addName函数。

运行结果

当您在输入框中输入一个名称并点击"添加名称"按钮时，程序会将名称添加到数组中，并将数组内容展示在页面上。

总结

本文介绍了如何使用HTML和JavaScript编写一个程序，用于输入和展示名称数组。您可以根据自己的需求对代码进行修改和扩展，以满足更多的功能要求。