个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
所以基本上我正在创建一个程序，允许用户创建和管理“待办事项列表”。这将允许用户添加新项目、删除所选项目、突出显示/取消突出显示所选项目以及对项目进行排序等。我目前正在研究添加按钮，但我对 HTML 中的不同功能感到非常困惑以及允许我操作 DOM 的代码。
当用户单击添加按钮并且项目名称有效时，应将新项目添加到页面的待办事项列表中(这实际上为用户添加的每个项目创建一个新复选框)。该复选框基本上是为了可以选择/取消选择项目，以及单击添加按钮时项目名称文本框中的文本。
我想我现在有两个问题。我正在尝试验证项目名称是否至少有 1 个字符长。我在“addHandler.js”文件中编写了代码，但是当我在文本框中什么都不写并单击 HTML 浏览器上的添加按钮时，没有弹出错误消息。我不知道为什么它忽略我的功能。我正在努力解决的另一件事是为添加的每个有效项目创建一个新复选框的部分。我知道如何在 HTML 页面上创建一个复选框，但我不明白如何让我的程序为用户输入的每个项目创建一个新的复选框。
任何帮助或插入正确的方向将不胜感激。我对 HTML 和 javascript 也很陌生，所以用简单的术语解释一些东西也会让我非常感激。
todo.html代码:
<html>
<head>
<title>Checklist</title>
</head>
<body>
<div><h1>My to-do list</h1></div><br />
<div id ="myCheckList">Enter an item:</div>
<div>Type something: <input type="text" id="textbox"></input></div>
<button type="button" id="addBut">Add item</button>
<button type="button" id="removeBut">Remove items</button>
<button type="button" id="toggleBut">Toggle highlight</button>
<button type="button" id="sortBut">Sort items</button>
<script src="addHandler.js"></script>
</body>
</html>
addHandler.js代码:
function init(){
let button = document.getElementById("addBut");
button.onclick = buttonClicked;
let tb = document.getElementById("textbox");
tb.onblur = validate;
}
function add(){
let someEle = document.getElementById("myCheckList");
someEle.innerHTML = 'You added an item';
}
function validate(){
if(document.getElementById("textbox").value.length == 0){
alert("You need to enter something");
}
}
最佳答案
您应该有一个包装器，其中包含可以附加新元素的复选框项目。
<div id="checklist_items"></div>
然后您可以使用以下函数创建一个包含复选框和输入文本的新 div，然后将其附加到您的 list 中:
function addItem() {
var input = document.getElementById("textbox");
var wrapper = document.getElementById("checklist_items");
if(input.value.trim() != "") {
var new_element = document.createElement("DIV");
new_element.innerHTML = '<input type="checkbox"> '+input.value;
wrapper.appendChild(new_element);
}
else {
alert("You must enter at least 1 character.");
}
}
我还将使用以下内容将功能添加到您的按钮:
document.getElementById("addBut").addEventListener("click", addItem);
关于javascript & html - 每次用户在文本框中输入项目时创建新的复选框选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58131183/
25
4
0
我是一名优秀的程序员,十分优秀！