티스토리 뷰

코딩/오류 노트

addeventlistener

ehzim 2023. 11. 27. 20:42 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
</head>
<body>
    <div class="container">
        <div class="top">
            <div class="a box">
                <input type="checkbox" name="" id="first">
                <p>이미지</p>
            </div>
            <p class="a info">상품정보</p>
            <p class="a price">판매가</p>
            <p class="a number">수량</p>
            <p class="a bank">적립금</p>
            <p class="a division">배송구분</p>
            <p class="a ex">배송비</p>
            <p class="a sum">합계</p>
            <p class="a select">선택</p>
        </div>
        <div class="bottom">
            <div class="a box">
                <input type="checkbox" name="" id="second">
                <img src="img/photo.jpg" alt="">
            </div>
            <p class="a info">상품</p>
            <div class="a price">
                <span>13500</span>원
            </div>
            <div class="a number" id="nn">
                <input class="c" type="number" name="" id="num" value="1">
                <button class="c" id="cha">변경</button>
            </div>
            <p class="a bank">150원</p>
            <p class="a division">기본배송</p>
            <p class="a ex">무료</p>
            <div  class="a sum">
                <span>13500</span>원
            </div>
            <div class="a select">
                <button>주문하기</button>
                <button>관심상품등록</button>
                <button>X 삭제</button>
            </div>
        </div>
    </div>
</body>
<script src="a.js"></script>
</html>

 

 

CSS

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
.container{
    width: 90%;
    margin: 0 auto;
}
div.top{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.box{
    width: 10%;
    display: flex;
    /* justify-content: center;
    align-items: center; */
    border: 1px solid red;
}
p{
    text-align: center;
}
#first{
    margin-right:5px;
}

.info{
    width: 15%;
    border: 1px solid red;
}
.price{
    width: 10%;
    border: 1px solid red;
}
.number{
    width: 10%;
    border: 1px solid red;
}
#nn{
    width: 8%;
}

#num{
    width: 100%;
}
#cha{
    width: 100%;
}

.bank{
    width: 10%;
    border: 1px solid red;
}
.division{
    width: 10%;
    border: 1px solid red;
}
.ex{
    width: 10%;
    border: 1px solid red;
}
.sum{
    width: 10%;
    border: 1px solid red;
}
.select{
    display: flex;
    flex-direction: column;
    border: 1px solid red;
}
.bottom{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
}
img{
    width: 80%;
}
.a{
    width: 10%;
}

 

JS

var change=document.querySelector("#cha");
console.log(change);

change.addEventListener("click",a);

function a(){
    console.log("연결");

    var price=document.querySelector(".price span").textContent;
    console.log(price);

    var n=document.querySelector(".number input").value;
    console.log(n);
    var a=price*n;

    var s=document.querySelector(".sum span");
    // console.log(s);
    s.textContent=a;
    console.log(s);
}

 

 

변수 change에 아이디가cha인 버튼을 담는다.

 

change가 클릭 되면 a가 실행되도록 코드를 작성한다.

함수 a가 실행되려면 함수가 존재해야 하므로 a라는 함수명을 가진 함수를 작성한다.

 

함수 a 가 잘 실행되는지 보기 위해 console에 문구를 출력해보았다.

그리고 다시 pirce변수에 price 클래스의 span의 텍스트 콘텐츠만 가져와 price에 담아준다.

 

그리고 변수 n에 number클래스의 input의 value를 가져와 담는다.

후에 변수 a에 price와 n을 곱한 값을 담아준다.

 

다시 변수 s에 sum클래스의 span을 가져와 담고 그 안의 텍스트 콘텐츠에 미리 계산한 a 값을 대입해준다.

 

 

 

 

 

저작자표시

'코딩 > 오류 노트' 카테고리의 다른 글

label 안의 img 파일 오류  (1) 2023.11.29
split & replace  (1) 2023.11.28
javascript 코드 위치에 따른 오류  (2) 2023.11.23
[7주 2일차] border사용  (1) 2023.11.21
[7주 2일차] 코드 수정 및 보충  (0) 2023.11.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday