인프런 커뮤니티 질문&답변

애용이는애용해

작성한 질문수

[코드캠프] 훈훈한 Javascript

실행 컨텍스트

input태그 내에서 띄어쓰기 문제가 있어요

해결된 질문

작성

994

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>

스크린샷 2023-01-20 오후 4.06.35.png

javascript

답변 2

otter

안녕하세요 애용이는애용해님!🐱

코드를 살펴보니, createTodo 함수 안에서 input box에 하나의 공백을 만들어내고 있는 것 같습니다!

우리가 input box에 텍스트를 입력하고 Enter 키를 누르게 되면 keyCodeCheck 함수가 실행되죠?

이후 Enter 키가 입력된 것으로 판단되면 createTodo 함수가 실행되며 새로운 li 태그를 생성하게 됩니다.

그리고 그와 동시에 input box에 입력되어 있는 텍스트를 빈 문자열("")로 변경하게 되는데, 현재 애용이는애용해님이 작성해 주신 코드를 확인해 보면, 텍스트를 빈 문자열이 아닌 공백 문자열(" ")로 변경해 주고 있어서 이러한 문제가 발생한 것으로 보여집니다!

createTodo 함수 내부에 있는 todoinput.value = " "; 이 코드의 문자열을 공백(" ")이 아닌 빈 문자열("")로 변경해 보시길 바랍니다!

감사합니다 :)