input태그 내에서 띄어쓰기 문제가 있어요
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>
Answer 2
1
안녕하세요 애용이는애용해님!🐱
코드를 살펴보니, createTodo 함수 안에서 input box에 하나의 공백을 만들어내고 있는 것 같습니다!
우리가 input box에 텍스트를 입력하고 Enter 키를 누르게 되면 keyCodeCheck 함수가 실행되죠?
이후 Enter 키가 입력된 것으로 판단되면 createTodo 함수가 실행되며 새로운 li 태그를 생성하게 됩니다.
그리고 그와 동시에 input box에 입력되어 있는 텍스트를 빈 문자열("")로 변경하게 되는데, 현재 애용이는애용해님이 작성해 주신 코드를 확인해 보면, 텍스트를 빈 문자열이 아닌 공백 문자열(" ")로 변경해 주고 있어서 이러한 문제가 발생한 것으로 보여집니다!
createTodo 함수 내부에 있는 todoinput.value = " "; 이 코드의 문자열을 공백(" ")이 아닌 빈 문자열("")로 변경해 보시길 바랍니다!
감사합니다 :)
강의 내용 PPT 제공
0
177
2
openweather 401 오류 지속적으로 발생해요..ㅠ
0
375
3
Geolocationposition 오류
1
522
1
for of, for in 강의에서
0
217
1
선생님 remaining 질문입니다.
0
232
1
ppt 제공
0
326
1
혹시 프론트, 백엔드 코스랑 강의가 겹치나요?
0
533
2
display:flex의 의미
0
428
1
반복문을 활용한 날짜 데이터 리팩토링
0
285
2
JS로 HTML. CSS 조작
0
256
1
조건에 따른 메시지 출력 강의
0
183
1
locallhost
0
474
2
객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)
0
254
1
interval에 대한 질문입니다.
0
278
2
이해가 안되는 부분..
0
400
2
강의 보며 작업한 코드를
0
395
1
제대로 이해한건지 모르겠어요..
0
322
2
강의자료 부탁드립니다.
0
479
1
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
0
5060
1
openweather api 2.5 관련 질문드립니다
0
747
2
openweather 401에러
0
520
1
createTodo함수 안에 매개변수
0
243
1
contents : complete : 가 무슨뜻인가요?
0
256
2
Javascript Exercise 깃허브에 푸쉬
0
350
1