问题描述
当我在表单中输入并按回车键时,我输入的内容无法显示在内容 div 上。它从“//将项目添加到列表”部分不起作用,我想知道我的 EventListener 或 keyup 有什么问题......(在我的控制台上宣布没有错误)。任何人都可以帮助我吗?谢谢! 这是我的 html 文件:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="to-do.css">
<link rel="stylesheet" href="/css/all.min.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="clear">
<i class="fas fa-sync-alt"></i>
</div>
<div id="date"></div>
</div>
<div class="content">
<ul id="list">
<!--<li class="item">
<i class="far fa-circle co" job="complete" id="0"></i>
<p class="text">Drink Coffee</p>
<i class="fas fa-trash de" job="delete" id="0"></i>
</li>-->
</ul>
</div>
<div class="add-to-do">
<i class="fas fa-plus-circle" ></i>
<input type="text" id="input" placeholder="Add a-to-do">
</div>
</div>
<script src="to-do.js"></script>
</body>
</html>
这是我的js文件:
const clear = document.querySelector('clear')
const dateElement=document.getElementById('date')
const list=document.getElementById('list')
const input = document.getElementById('input')
//classes name
const CHECK = "fa-check-circle"
const UNCHECK = "fa-circle-thin"
const LINE_THROUGH = "lineThrough"
// show todays date
const options={weekday:"long",month:"short",day:"numeric"}
const today = new Date()
dateElement.innerHTML=today.toLocaleDateString("en-US",options)
//add to do function
function addTodo(todo){
const item=`<li class="item">
<i class="far fa-circle co" job="complete" id="0"></i>
<p class="text">${todo}</p>
<i class="fas fa-trash de" job="delete" id="0"></i>
</li>
`
const position="beforeend"
list.insertAdjacentHTML(position,item)
}
addTodo("Drink Coffe")
// add an item to the list
document.addEventListener("keyup",function(even){
if(event.keycode==13){
const todo = input.value;
//if the input isn't empty
if(todo){
addTodo(todo);
}
input.value=""
}
});
这是我的css:
body{
padding: 0;
margin: 0;
background-color: rgba(0,0.1);
font-family: 'Titillium Web',sans-serif;
}
/* ------------ container ------------ */
.container{
padding:10px;
width:380px;
margin:0 auto;
}
/* ------------ header ------------ */
.header{
width: 380px;
height:200px;
background-image: url('http://t-van.net/wp-content/uploads/2020/08/starry_night_full.jpg');
background-size: 100% 200%;
background-repeat: no-repeat;
border-radius: 15px 15px 0 0;
position: relative;
}
.clear{
width : 30px;
height: 30px;
position: absolute;
right:20px;
top: 20px;
}
.clear i{
font-size: 30px;
color: #FFF;
}
.clear i:hover{
cursor: pointer;
text-shadow: 1px 3px 5px #000;
transform: rotate(45deg);
}
#date{
position: absolute;
bottom: 10px;
left: 10px;
color: #FFF;
font-size: 25px;
font-family: 'Titillium Web',sans-serif;
}
/* ------------ content ------------ */
.content{
width:380px;
height: 350px;
max-height:350px;
background-color: #FFF;
overflow: auto;
}
.content::-webkit-scrollbar {
display: none;
}
.content ul{
padding:0;
margin:0;
}
.item{
width:380px;
height: 45px;
min-height: 45px;
position: relative;
border-bottom: 1px solid rgba(0,0.1);
list-style: none;
padding: 0;
margin: 0;
}
.item i.co{
position: absolute;
font-size: 25px;
padding-left:5px;
left:15px;
top:10px;
}
.item i.co:hover{
cursor: pointer;
}
.fa-check-circle{
color:#6eb200;
}
.item p.text{
position: absolute;
padding:0;
margin:0;
font-size: 20px;
left:50px;
top:5px;
background-color: #FFF;
max-width:285px;
}
.lineThrough{
text-decoration: line-through;
color : #ccc;
}
.item i.de{
position: absolute;
font-size: 25px;
right:15px;
top:10px;
}
.item i.de:hover{
color:#af0000;
cursor: pointer;
}
/* ------------ add item ------------ */
.add-to-do{
position: relative;
width: 360px;
height:40px;
background-color: #FFF;
padding: 10px;
border-top: 1px solid rgba(0,0.1);
}
.add-to-do i{
position: absolute;
font-size: 40px;
color: #4162f6;
}
.add-to-do input{
position: absolute;
left: 50px;
height: 35px;
width: 310px;
background-color: transparent;
border: none;
font-size: 20px;
padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #4162f6;
font-family: 'Titillium Web',sans-serif;
font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
color: #4162f6;
font-family: 'Titillium Web',sans-serif;
font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
color: #4162f6;
font-family: 'Titillium Web',sans-serif;
font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */
color: #4162f6;
font-family: 'Titillium Web',sans-serif;
font-size: 20px;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)