버튼을 클릭하면 페이지의 특정 부분으로 이동하는 방법은 무엇입니까?

debugcn 에 게시 Dev

user1117050

버튼을 클릭하고 항목이 바구니에 추가 된 후 자동으로 페이지의 바구니 부분으로 이동하지만 나머지 자바 스크립트를 엉망으로 만들지 않고 코드를 작성하는 방법을 잘 모르겠습니다. 버튼에 이미있는 코드입니다.

모든 코드 스 니펫을 주시면 감사하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>

<header class="main-header">
    <nav class="main-nav nav">
    </nav>
</header>

    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 0</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£12.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
<div class="shop-item">
        <span class="shop-item-title">Album 2</span>&nbsp;
        <div class="shop-item-details">
            <span class="shop-item-price">£14.50</span>
           
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
  
    <div class="shop-item">
        <span class="shop-item-title">Album 4</span>&nbsp;
        <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
        <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
    </div>
    
    </div>
</section>

    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 6</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
   <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 8</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
   
    
   
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">Basket</h2>
  <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <p></p> 
<div class="cart-items">
    </div>
    <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">£0</span>
    </div>
    <button class="btn btn-primary btn-purchase" type="button">CHECKOUT</button>
</section>

<script>
if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('shop-item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
    alert('Thank you for your purchase')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    addItemToCart(title, price)
    updateCartTotal()
}

function addItemToCart(title, price) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    var price = parseFloat(priceElement.innerText.replace('£', ''))
    var quantity = quantityElement.value
    total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)
}


</script>
</body>
</html>

예프 루비오

해당 요소로 부드럽게 스크롤 하시겠습니까?

scrollIntoView () 사용할 수 있습니다 .

<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>

<header class="main-header">
    <nav class="main-nav nav">
    </nav>
</header>

    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 0</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£12.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
<div class="shop-item">
        <span class="shop-item-title">Album 2</span>&nbsp;
        <div class="shop-item-details">
            <span class="shop-item-price">£14.50</span>
           
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
  
    <div class="shop-item">
        <span class="shop-item-title">Album 4</span>&nbsp;
        <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
        <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
    </div>
    
    </div>
</section>

    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 6</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
  
   <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">Album 8</span>&nbsp;
            <div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
        </div>
   
    
   
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">Basket</h2>
  <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <p></p> 
<div class="cart-items">
    </div>
    <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">£0</span>
    </div>
    <button class="btn btn-primary btn-purchase" type="button">CHECKOUT</button>
</section>

<script>
if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('cart-quantity-input')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('shop-item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
    alert('Thank you for your purchase')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    addItemToCart(title, price)
    updateCartTotal()
}

function addItemToCart(title, price) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
    document.getElementsByClassName('btn-purchase')[0].scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    var price = parseFloat(priceElement.innerText.replace('£', ''))
    var quantity = quantityElement.value
    total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)
}


</script>
</body>
</html>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

버튼을 클릭하면 페이지의 특정 부분으로 이동하는 방법은 무엇입니까?

버튼을 클릭하면 페이지의 특정 부분으로 이동하는 방법은 무엇입니까?

제출 버튼을 클릭하면 홈페이지로 리디렉션하는 방법은 무엇입니까?

버튼을 클릭하여 flutter에서 다른 페이지로 이동하는 방법은 무엇입니까?

특정 페이지에서만 뒤로 버튼을 처리하는 방법은 무엇입니까?

Flutter의 페이지에있는 버튼을 클릭하여 BottomNavigationBar의 페이지 중 하나로 이동하는 방법은 무엇입니까?

uwp의 다른 페이지에서 버튼을 클릭하면 텍스트 상자에 값을 설정하는 방법은 무엇입니까?

클릭시 선택 옵션을 버튼 클릭 데이터 대상과 동일한 데이터 대상으로 설정하는 방법은 무엇입니까?

웹 페이지의 버튼을 주기적으로 클릭하는 방법을 시뮬레이션하는 방법은 무엇입니까?

Android 뒤로 버튼을 클릭하면 이전 페이지에서 Flutter 애니메이션을 다시 초기화하는 방법은 무엇입니까?

여러 버튼이 각도기에서 동일한 클래스를 갖는 경우 특정 버튼을 클릭하는 방법은 무엇입니까?

몇 분마다 웹 페이지에서 제출 버튼을 자동으로 클릭하는 방법은 무엇입니까?

클릭 할 때 특정 버튼의 이미지를 업데이트하는 방법은 무엇입니까?

다른 HTML 페이지로 이동하여 자동으로 버튼을 클릭하는 방법은 무엇입니까?

Android에서 버튼을 클릭했는지 여부를 설정하는 방법은 무엇입니까?

마우스 이동으로 버튼 클릭시 기능을 실행하는 방법은 무엇입니까?

로그인 버튼을 클릭 할 때 페이지가 아래로 이동하는 것을 방지하는 방법은 무엇입니까?

html / json 페이지에서 특정 부분을 추출하는 가장 좋은 방법은 무엇입니까?

위젯을 특정 위치로 이동하는 방법은 무엇입니까?

특정 열을 한 행 위로 이동하는 방법은 무엇입니까?

CSS 카드를 일정 시간까지 자동으로 뒤집고 버튼 클릭시 화면에서 사라지게하는 방법은 무엇입니까?

탐색을 사용하여 파일을 마우스 오른쪽 버튼으로 클릭하면 특정 파일의 Windows 속성에서 사용자 지정 속성 정보를 보는 방법은 무엇입니까?

sparql 쿼리를 사용하여 dbpedia의 특정 페이지로 이동하는 방법은 무엇입니까?

작업 표시 줄에서 설정 버튼을 누르면 다른 페이지로 이동하는 방법은 무엇입니까?

UWP C #에서 버튼 클릭으로 특정 URL (YouTube 동영상)을 여는 방법은 무엇입니까?

사용자가 Android에서 뒤로 버튼을 클릭하면 활동에서 조각으로 데이터를 보내는 방법은 무엇입니까?

다른 버튼을 클릭 한 후 버튼 스타일을 지정하는 방법은 무엇입니까?

html 페이지의 특정 부분을 webBrowser 컨트롤로 가져 오는 방법은 무엇입니까?

선택 버튼의 옵션을 클릭하면 이미지를 표시하는 방법은 무엇입니까?

Internet Explorer 개체에서 웹 페이지로 이동하여 "로그인"버튼을 클릭하는 방법은 무엇입니까?

버튼을 정확한 위치로 이동하는 방법은 무엇입니까?