How can I insert a multiptes value onclicked inside my submit function-CodePudding

I'm creating a simple app with the name of tip calculator, I have multiples buttons, the idea is the user should type the amount of the bill then click on one of the buttons to select the value of the tip then type the number of the persons and then submit to get Tip amount/Person and the Total/person. I got stuck in the part of not knowing how to insert the value of buttons in my formula? What do you think?

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>

CodePudding user response：

Ok so the default behavior of a <button> is to submit the form so adding a type="button" attribute to it would stop it from submitting.

Next thing you want in an eventHandler on the buttons to detect clicks, the simplest way for me is to add a class="tip-btn" to the buttons, then select then in javascript like so:

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

After this tipBtns would be a collection so we iterate it and add an eventListener

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

then inside eventListener we add some code to get the value of the clicked button

const value = e.target.value

where e is the event, target is the html button, and value is the attribute.

Then code to select the input we want changed

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

and just change the value of the input and this would be our button click event listener

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

Edit: Also as stated by @IsharaM the const inputTip that selected that value is placed outside of the submitHandler it should be inside of it.

CodePudding user response：

One reason for not getting the tip amount, even when typed on the text field(tip-input) is, you have defined the inputTip outside the submitHandler function as a const.
In order to dynamically get the value whenever Reset is clicked,

const inputTip = document.getElementById("tip-input").value; should be defined inside the submitHandler function.