时间戳

首页 > 解决方案 > 如何在我的提交函数中插入一个 multiptes 值 onclicked

javascript - 如何在我的提交函数中插入一个 multiptes 值 onclicked

问题描述

我正在创建一个名为小费计算器的简单应用程序，我有多个按钮，想法是用户应该输入账单金额，然后单击其中一个按钮以选择小费的值，然后输入数量人，然后提交以获得小费金额/人和总计/人。我陷入了不知道如何在公式中插入按钮值的部分？你怎么看？

const submitEl = document.getElementById("submit-btn");
const form = document.getElementById("form");



const submitHandler = (e) => {
    e.preventDefault();
    const billEL = document.getElementById("bill").value; 
    const peopleNum = document.getElementById("peopleNum").value;
    const tipAmount = document.getElementById("tip-amount");
    const totalEl = document.getElementById("total");
    const inputTip = document.getElementById("tip-input").value;
    const tipButtons = document.querySelectorAll(".tip-btn");
    console.log(tipButtons)

    // To calculate the bill per person
    let billPerPerson = (billEL / peopleNum).toFixed(2);
    
    // To calculate the tip for per person
    let tipPerPeron= ((inputTip / 100) * billPerPerson);

    tipAmount.innerHTML=`<span>$</span>${tipPerPeron}`;
    totalEl.innerHTML=`<span>$</span>${billPerPerson}`;

    Array.from(tipButtons).forEach((btn)=> {
        btn.addEventListener("click", (e)=> {
            const value = e.target.value;
            
        })
    })
    

}

//Event Listener
form.addEventListener("submit", submitHandler);
<!DOCTYPE html>
<html lang="en">
<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>Tip Calculator Tip</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
    <body>
        <main>
            <h1 class="title">Splitter</h1>
            <form class="container" id="form">
                <div class="left-side">
                    <div class="form-control">
                        <label for="bill">Bill</label>
                        <input type="text" value="" id="bill">
                    </div>
                    
                    <div class="form-control">
                        <label for="tip">Select Tip $</label>
                        <div class="selected-tip">
                            <button type="button" class="tip-btn" value="5">5%</button>
                            <button type="button" class="tip-btn" value="10">10%</button>
                            <button type="button" class="tip-btn" value="15">15%</button>
                            <button type="button" class="tip-btn" value="25">25%</button>
                            <button type="button" class="tip-btn" value="50">50%</button>
                            <input  type="text" id="tip-input"/>
                        </div>
                    </div>

                    <div class="form-control">
                        <div class="labels">
                            <label for="numPeople">Number of people</label>
                            <label for="Error" id="error">Can't be zero</label>
                        </div>
                        <input type="text" id="peopleNum">
                    </div>
                </div>

                <div class="right-form">
                <div class="form-controls">
                    <div class="form-control">
                        <div class="tip-amount">
                            <h2>Tip Amount</h2>
                            <span>/ Person</span>
                        </div>
                        <h1 id="tip-amount">$0.00</h1>
                    </div>

                    <div class="form-control total">
                        <div class="total">
                            <h2>Total</h2>
                            <span>/ Person</span>
                        </div>
                        <h1 id="total">$0.00</h1>
                    </div>
                </div>

                    <button class="reset-btn" id="submit-btn">Reset</button>
                </div>  
            </form>
        </main>    
    </body>
</html>

标签： javascriptcss

解决方案

好的，所以 a 的默认行为<button>是提交表单，因此向type="button"它添加属性会阻止它提交。

接下来你想要在eventHandler中buttons检测点击，对我来说最简单的方法是在 中添加class="tip-btn"，buttons然后在 javascript 中选择，如下所示：

const tipBtns = document.querySelectorAll('.tip-btn')

之后这tipBtns将是一个集合，因此我们对其进行迭代并添加一个eventListener

Array.from(tipBtns).forEach((btn) => {
    btn.addEventListener("click", function (e) {
        // do code
    })
})

然后在里面eventListener我们添加一些代码来获取点击按钮的值

const value = e.target.value

哪里e是event,target是html button,value是attribute。

然后代码选择我们想要更改的输入

const input = document.querySelector('#tip-input')

只需更改输入的值，这将是我们的按钮单击事件侦听器

Array.from(tipBtns).forEach((btn) => {
    btn.addEventListener("click", function (e) {
        const value = e.target.value
        const input = document.querySelector("#tip-input")
        input.value = value
    })
})

编辑：也如@IsharaM 所述const inputTip，选择该值的值位于其外部，submitHandler它应该位于其内部。

推荐阅读