javascript - 如何让按钮点击后转到页面的某个部分？

标签 javascript html

我希望在单击按钮并且该项目已添加到购物篮后，它会自动转到页面的购物篮部分，但我不太知道如何编码而不弄乱其余部分按钮中已有的 javascript 代码。

任何代码片段将不胜感激。

<!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>

关于javascript - 如何让按钮点击后转到页面的某个部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60736624/

上一篇：android-studio - 可以显示不带点的 flutter 项目的实际文件夹结构

下一篇：python - 如何将数据框中的某些行替换为其他数据框中具有附加列的相应行

相关文章：

html - 在字段集的图例内显示内联 div

javascript - 监听 JavaScript 中的变量变化

javascript - Angular 5 和转换仅在 'new' 项中

javascript - 在消息传递模式架构下与事件一起传递的数据

JavaScript 正则表达式 匹配之前的任何内容

html - 使用 CSS3 将图像置于 HTML5 视频背景的中心

javascript - 如何在悬停时向不同的 div 元素添加不同的背景图像？

html - 购买舞台和 CSS

html - Bootstrap 菜单 CSS

javascript - `SyntaxError: Unexpected token <`

©2024 IT工具网  联系我们