-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
해결됨
input태그 내에서 띄어쓰기 문제가 있어요
23.01.20 16:08 작성 조회수 691
0
todolist 보고있습니다.
엔터키를 누르면 새 할 일이 생기는데요,
input 태그 안에서 띄어쓰기가 한 칸 생기네요?
어째서 이런 문제가 발생하는걸까요..
사진에 한칸이, 띄워져서 써져요 저 두 항목이 띄워져서 쓰인겁니다.
혹시모르니 코드도 첨부해요
*{
box-sizing: border-box;
margin: 0px;
}
html, body{
width: 100%;
height: 100%;
}
body{
background-color: azure;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.todo-container{
max-width: 100%;
width: 400px;
}
#todo-input{
background-color: lightyellow;
border: none;
display: block;
font-size: 2rem;
padding: 0.5rem 2rem 0.5rem 0.5rem;
width: 100%;
}
#todo-list{
background-color: snow;
list-style-type: none;
padding: 0;
}
#todo-list li{
border-top: 1px solid rgb(242,242,242);
font-size: 1.5rem;
user-select: none;
}
.complete{
color: rgb(155, 155, 155);
text-decoration: line-through;
}
li button{
background-color: mintcream;
width: 1.5rem;
height: 1.5rem;
margin: 0.5rem;
border: 2px solid black;
border-radius: 8px;
cursor: pointer;
}
li button:active{
border: 2px solid gray;
}
.delete-btn-wrapper{
margin-top: 1rem;
}
.delete-btn-wrapper button{
font-weight: bold;
background-color: antiquewhite;
padding: 0.2rem 1rem;
cursor: pointer;
}const todoInput = document.querySelector("#todo-input");
const todoList = document.querySelector("#todo-list");
const createTodo = () =>{
const newLi = document.createElement('li');
const newSpan = document.createElement('span');
const newBtn = document.createElement('button');
newBtn.addEventListener('click',()=>{
newLi.classList.toggle('complete');
});
newLi.addEventListener('dblclick',()=>{
newLi.remove()
})
newSpan.textContent = todoInput.value;
newLi.appendChild(newBtn);
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = " ";
// console.log(todoList.children[0].querySelector('span').textContent)
saveItemsFn();
}
const keyCodecheck = () => {
if (window.event.keyCode===13 && todoInput.value!==""){
createTodo();
}
}
const deleteAll = () =>{
const liList = document.querySelectorAll('li');
for(let i=0; i<liList.length; i++){
liList[i].remove();
}
}
const saveItemsFn = () =>{
const saveItems = [];
for(let i=0; i<todoList.children.length; i++){
const todoObj = {
contents: todoList.children[i].querySelector('span').textContent,
complete: todoList.children[i].classList.contains('complete')
}
saveItems.push(todoObj);
}
console.log(saveItems);
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1>To Do</h1>
<div class="todo-container">
<input type="text" id="todo-input" onkeydown="keyCodecheck()">
<ul id="todo-list">
</ul>
</div>
<div class="delete-btn-wrapper">
<button onclick="deleteAll()">Deletel ALL</button>
</div>
<script src="./index.js"></script>
</body>
</html>
답변을 작성해보세요.
1
otter
2023.01.20
안녕하세요 애용이는애용해님!🐱
코드를 살펴보니, createTodo 함수 안에서 input box에 하나의 공백을 만들어내고 있는 것 같습니다!
우리가 input box에 텍스트를 입력하고 Enter 키를 누르게 되면 keyCodeCheck 함수가 실행되죠?
이후 Enter 키가 입력된 것으로 판단되면 createTodo 함수가 실행되며 새로운 li 태그를 생성하게 됩니다.
그리고 그와 동시에 input box에 입력되어 있는 텍스트를 빈 문자열("")로 변경하게 되는데, 현재 애용이는애용해님이 작성해 주신 코드를 확인해 보면, 텍스트를 빈 문자열이 아닌 공백 문자열(" ")로 변경해 주고 있어서 이러한 문제가 발생한 것으로 보여집니다!
createTodo 함수 내부에 있는 todoinput.value = " "; 이 코드의 문자열을 공백(" ")이 아닌 빈 문자열("")로 변경해 보시길 바랍니다!
감사합니다 :)
1
otter
2023.01.20
스스로 답을 찾아내셨군요..! 댓글을 확인하지 못하고 답변을 작성 중이었네요😂
앞으로도 이렇게 능동적으로 문제를 해결해 나가신다면, 금방 새로운 지식들을 습득하실 수 있을 거예요! 화이팅입니다!
답변 2