728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #text_container{
            background-color: beige;
        }
    </style>
</head>
<body>
    <div id="input_container">
        <input type="text" placeholder="문자를 입력해보세요">
        <button>입력</button>
    </div>
    <div id="text_container">
        
    </div>


    <script>
        // 버튼을 눌렀을 시, 혹은 엔터를 입력했을 시 텍스트 div을 넣어줄부모 컨테이너
        let textContainer = document.getElementById('text_container');
        //입력 버튼을 가져옴
        let inputButton = document.querySelector('button');
        //입력 태그(텍스트창)
        const inputTag = document.querySelector('input');
        // 입력 버튼을 클릭했을 떄 실행할 동작을 설정
        inputButton.addEventListener('click', appendText);
        
        //키가 눌렸다가 때졌을 경우 이벤트 등록
        inputTag.onkeyup = e => {
            // 눌려진 키가 Enter가 아니라면
            if(e.key !== 'Enter'){
                return; //함수 종료
            }
            appendText(); //자식으로 텍스트 div를 추가한다
        }
        
        
        // 부모 컨테이너 div 에 자식으로서 텍스트를 추가해주는 함수
        function appendText(){
            // 현재 부모 컨테이너의 자식 개수를 받아온다.
            const chileCount = textContainer.childElementCount;
            let div = document.createElement('div');//div 태그를 가진 노드 생성
            div.className = '내용';
            // text설정한다 -> '행번호 : inputTag의 내용'
            // 따라서 -> 'childCount + 1 : inputTag.value'
            div.textContent = `${chileCount + 1} : ${inputTag.value}`;//해당 div의 내용을 설정한다.
            textContainer.appendChild(div);
            //현재 줄에 넣을 삭제버튼 생성
            const removeBtn = document.createElement('button');
            removeBtn.innerText = '삭제';
            div.appendChild(removeBtn);
            //삭제 버튼을 눌렀을 때, div 를 제거함
            removeBtn.addEventListener('click', () =>{
                // 현재 div의 번호를 받아온다.
                let divNumber = +div.textContent.split(':')[0];
                console.log(divNumber)
                
                // for (let index = divNumber; index < divChildren.length; index++) {
                //     const element = array[index];
                    
                // }
                
                // for (let index = divNumber + 1; index < divChildren.length; index++) {
                //     // 현재 index의 div가 가지고있는 글자를 전부 가져온다
                //     let content = divChildren.item(index).innerHTML;
                //     divChildren.item(index).textContainer = `${index - 1}: ${content.split(':')[1]}`; // 텍스트 내용 부분만 가져온다.(번호뺴고)                    
                // }


                // div를 삭제한다.
                div.remove();
            });    
            inputTag.value = '';// input태그 내용을 초기화  
        } 
     
        
        
    
        
    </script>
</body>
</html>

 

실행창

 

728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

js 시계 + 타이머 만들기  (0) 2023.01.03
setTimeout / setInterval 사용 요약  (0) 2023.01.03
addEventListener 활용1  (0) 2023.01.03
js 기초6  (0) 2023.01.03
js 기초5  (0) 2023.01.01
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="inputEvent.js" defer></script>
    
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #FFF700;
            border: 5px solid red;
            cursor : pointer;
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>
const box = document.querySelector('.box');
const initMousPos = {x:0, y:0};//리터럴 객체생성방법 // 마우스 드래그 시작 지점의 위치
// functioninitMouserPos(){
//     this.x = 0;
//     this.y = 0;
// }
const offset = {x : 0, y : 0}; //이동할 거리
// mousemove시 실행할 move함수
const move = function(event){
    // 이동할 거리 = 현재 (드래그 진행 시점)의 마우스 위치 - (드래그 시작 지점의 마우스 위치)
    offset.x = event.clientX - initMousPos.x;
    offset.y = event.clientY - initMousPos.y;
    // translate3d는 GPU를 사용하기 떄문에 top, left 속성을 변경하는 것보다 처리 속도가 빠름
    // top, left는 레이아웃에 영햘을 줌
    box.style.transform = `translate3d(${offset.x}px, ${offset.y}px,0)`;
};
// mousedown : 마우스가 눌렸다(클릭아님)
// mousedown 이벤트 발생 시, 드래그 시작 시점의 마우스 포인터 좌표(event.clientX 와 clientY)를 저장해 둡니다.
// 
box.addEventListener('mousedown', event =>{
    initMousPos.x = event.clientX - offset.x;
    initMousPos.y = event.clientY - offset.y;
    // mousedown 이벤트가 발생한 상태에서 mousemove 이벤트가 발생하면 box를 이동시키는 move를 실행
    document.addEventListener('mousemove', move);
});
// mouseup : 마우스를 떄는 이벤트(클릭 아님)가 발생하면 move 이벤트를 하면 안되므로 제거해준다
document.addEventListener('mouseup', () =>{
    document.removeEventListener('mousemove', move);
});

 

 

마우스로 클릭 후 이동 가능한 네모난 상자만들기

728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

setTimeout / setInterval 사용 요약  (0) 2023.01.03
addEventListener 활용2  (0) 2023.01.03
js 기초6  (0) 2023.01.03
js 기초5  (0) 2023.01.01
js 정규식 연습1  (0) 2023.01.01
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>이벤트</title>
            <meta charset="UTF-8">
            <meta http-equiv="x-uv-compatible">
    </head>
    <body>
        <div id="button">Click!</div>
        <script>
            // 선택된 요소 .addEventListener(이벤트 종료, 함수)
            let buttonElement = window.document.getElementById('button');
            buttonElement.addEventListener('click', () => {
                alert('hello');
                // alert('hello');
                // alert(x); x라는 내용을 가지는 메세지 출력
                if (confirm('Really?')) {
                    alert('yes');
                    // confirm(x) x라는 내용을 가지는 메세지를 출력하나 [확인]클릭시 true, [취소]클릭시 false를 반환한다.
                     }
                else{
                    alert('no');
                }
            });


        </script>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

함수(let)  (1) 2022.12.25
조건문  (0) 2022.12.25
요소선택  (1) 2022.12.25
오브젝트(키-값)  (0) 2022.12.25
연산자  (0) 2022.12.25

+ Recent posts

728x90
반응형
">

티스토리툴바