기초공사 (html,css,javascript)

6번 board - 모달창에 삭제 수정 - 버튼의글까지 나옴.--해결 --또다른 issue --미완료 본문

academy/JavaScript

6번 board - 모달창에 삭제 수정 - 버튼의글까지 나옴.--해결 --또다른 issue --미완료

에스프레소라떼 2024. 5. 18. 12:47

//

저 코드를 이용한다.!!

 

// 스스로 풀이시작

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Title</title>
    <!-- <script defer src="js/dom04.js"></script> -->
    <script defer src="js/dom0506.js"></script>

    <style>
      .content {
        width: 1024px;
      }

      .disp {
        height: 200px;
        border: 1px solid black;
      }

      .tab_host {
        display: flex;
        margin-top: 20px;
        text-align: center;
      }

      .tab:hover {
        cursor: pointer;
      }

      .tab {
        width: 200px;
        border: 1px solid #ededed;
      }

      #list {
        border: 1px solid #ededed;
      }
      /* modal*/
      /* 모달창 기본 스타일 */
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
      }

      /* 모달 내용 스타일 */
      .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
      }
    </style>
  </head>
  <body>
    <p>
      4. 아래의 입력창에 숫자가 입력되지 않도록 하고 길이 제한은 10자로 하시오.
      <br />
      숫자가 입력된다면 숫자가 입력되었다고 alert로 알려주시오
    </p>
    <input
      type="text"
      id="te_input"
      maxlength="9"
      placeholder="글자만 입력하세요."
    />

    <p>
      5.아래의 입력창에 입력 후 저장 버튼을 누르거나 엔터키를 누르면 입력한
      내용이 아래의 list에 추가 되도록 하시오.
      <br />초기화 버튼을 누르면 list안의 모든 내용이 지워져야 함
    </p>

    <h5>6.추가된 내용을 "각각" 수정 및 삭제 수 있게 변경하시오.</h5>

    <!-- ------------------------------------------------------------ -->
    <form id="form">
      <input type="text" value="" width="600" id="list_data" name="content" />
      <button type="submit" id="send" value="show_view">저장</button>
      <button type="reset" id="reset_one">초기화</button>
      <p>리스트</p>
      <ul id="list">
        <li class="liclass">list</li>
        <li class="liclass">list</li>
      </ul>
    </form>

    <!-- modal -->
    <!-- 모달 구조 -->
    <div id="myModal" class="modal">
      <!-- 모달 내용 -->
      <div class="modal-content">
        <span class="close">X</span>
        <p>수정 사항을 입력.</p>
        <input type="text" id="modalInput" />
        <button id="modalSave">저장</button>
      </div>
    </div>
  </body>
</html>

 

js

/*
5번.
1.input의 공간
2. 저장버튼 / 초기화버튼
3. 저장하면 어디에 생기게? ul인 #list-- 부모
    - document.createElement("li")
    - li.textConent = "liclass"
    - 부모.append(변수)

6번.
수정,삭제하기

*/
const $input = document.querySelector("#list_data");
const $saveBtn = document.querySelector("#send");
const $resetBtn = document.querySelector("#reset_one");
const $ul_list = document.querySelector("#list"); //ul
const $items = document.querySelectorAll("li"); // li들
console.log($items);

//요소만든다.
function update() {
  const $li = document.createElement("li");
  $li.className = "liclass";
  // $li.textContent = $input.value;
  $ul_list.appendChild($li);

  // 삭제버튼
  const $removeBtn = document.createElement("button");
  $removeBtn.className = "remove_btn";
  $removeBtn.textContent = "삭제";

  $removeBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    $removeBtn.parentNode.remove();
    const target = e.target.parentNode;
    console.log(target);
  });

  // 수정버튼
  const $modifyBtn = document.createElement("button");
  $modifyBtn.className = "modify_btn";
  $modifyBtn.textContent = "수정";

  // $span.textContent = $input.value;
  // 텍스트를 담을 별도의 요소 생성
  const $textContent = document.createElement("span");
  $textContent.textContent = $input.value;
  $li.append($textContent, $removeBtn, $modifyBtn); // li의 자식이 생김.

  // 수정버튼시 prompt
  $modifyBtn.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();

    // 수정버튼시 modal 나온다.
    // $li.textContent =  모달input.value
    // 저장버튼 시
    //  - 모달input.value = $li.textContent
    //    - $li.textContent에서 자식요소가 텍스트, 삭제버튼, 수정버튼이 있다.
    //      - 텍스트를 span 요소를 만들어서 span안에 텍스트를 넣어놓자!
    const $modal = document.getElementById("myModal"); // 전체모달
    const $modaContent = document.getElementsByClassName("modal-content");
    const $modalInput = document.querySelector("#modalInput"); //input
    const $modalSaveBtn = document.getElementById("modalSave");

    //let currentLi; // 현재 수정하고자 하는 li 요소를 저장하기 위한 변수-- 없어도 되긴됨.
    // $modalInput.value = $li.textContent;
    $modal.style.display = "block";
    console.log($modalInput.value);

    // currentLi = $li;

    // console.log(target); // button수정이 선택
    // console.log(target.parentNode); //li
    // li의 #text를 선택하면 된다.--#text를 어떻게 선택해?..
    // 그러므로 span요소를 만들자

    const target = e.currentTarget;
    const targetParent = target.parentNode;
    console.log(targetParent); // li가 나옴

    for (const child of targetParent.children) {
      // targetParent.chlidren는 text, 삭제버튼, 수정버튼
      // 그럼 child는 $textContent, 삭제버튼, 수정버튼의 각 자식들...
      console.log(child);
      $modalInput.value = targetParent.textContent;
      if (child.matches("span")) {
        //
        // $modalInput.value = child.childNodes[0].textContent; // 이렇게 해도 되고.
        $modalInput.value = child.innerText;
        break; //<span> 태그를 찾았으므로 더 이상 순회할 필요 없음
      }
    }

    const $close = document.querySelector(".close");
    //위의것을 getElementsClassName으로 하면 선택이 안된다..왜????
    $close.addEventListener("click", () => {
      $modal.style.display = "none";
    });

    // 모달창에서 저장하기
    $modalSaveBtn.addEventListener("click", () => {
      $li.textContent = $modalInput.value;
      $modal.style.display = "none";
    });
  });
}

//저장할떄
$saveBtn.addEventListener("click", (e) => {
  e.preventDefault();

  // 입력 값이 빈 문자열인 경우 alert 표시
  //  검색 trim()메소드 : 입력 값의 앞뒤 공백을 제거한 뒤 빈 문자열인지 확인
  if ($input.value.trim() === "") {
    alert("글을 입력하시오");
  } else {
    update();
    $input.value = "";
  }
});

// 초기화 버튼 클릭하면 모두 사라진다.
$resetBtn.addEventListener("click", () => {
  $ul_list.innerHTML = ""; // 초기화.
});

 

issue

 

저장하기 클릭하면 모달창이 뜨면서 모달input의 내용이 버튼의 글까지 나오는 이슈가 있었다.

해결방법

 

1. li에 글만 저장되도록 하는 span요소태그를 만든다.

그래서 li.apeen($span, 삭제버튼, 수정버튼)을 놔둔다.

 

2. 아래 코드를 입력한다.

  const target = e.currentTarget;
    const targetParent = target.parentNode;
    console.log(targetParent); // li가 나옴

    for (const child of targetParent.children) {
      // targetParent.chlidren는 text, 삭제버튼, 수정버튼
      // 그럼 child는 $textContent--> span태그 , 삭제버튼, 수정버튼의 각 자식들...
      console.log(child);
      $modalInput.value = targetParent.textContent;
      if (child.matches("span")) {
        $modalInput.value = child.childNodes[0].textContent; // 이렇게 해도 되고.span태그의 첫번째자식
        $modalInput.value = child.innerText; // 아래처럼 해도 된다.--span태그의 innerText
        break; //<span> 태그를 찾았으므로 더 이상 순회할 필요 없음
      }
    }

 

위의코드로 해결됨.

 

그러나 또 다른 이슈가 기다리고 있다.

 

모달창에서 저장하기 클릭 후 모달창이 닫히기는 하나,  모두 바껴버린다.

1.li에 하나의 목록만 있으면 잘 바뀌나, 여러개 있으면 모두 바뀌어 버린다. 내가 선택한 li의 글만 바뀌게 하고 싶고.

2. 삭제버튼과 수정버튼이 없어지지 않아야한다.

저작자표시

'academy > JavaScript' 카테고리의 다른 글

splice와 indexOf예제  (0) 2024.05.20
책 - 함수형코딩  (0) 2024.05.18
childrenNodes / children  (0) 2024.05.14
과제-타이머 만들기- 안되는 이유-코드로.-해결  (0) 2024.05.13
axios cdn 다운로드- 설치  (0) 2024.05.12
'academy/JavaScript' Related Articles more