मैं टिप कैलकुलेटर के नाम से एक साधारण ऐप बना रहा हूं, मेरे पास कई बटन हैं, विचार यह है कि उपयोगकर्ता को बिल की राशि टाइप करनी चाहिए, फिर टिप के मूल्य का चयन करने के लिए बटनों में से एक पर क्लिक करें और फिर टाइप करें व्यक्तियों की संख्या और फिर टिप राशि/व्यक्ति और कुल/व्यक्ति प्राप्त करने के लिए जमा करें। मैं अपने सूत्र में बटनों के मूल्य को सम्मिलित करने का तरीका नहीं जानने के भाग में फंस गया? आपको क्या लगता है?

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>
0
TheRealJohnDoe 23 सितंबर 2021, 18:28

2 जवाब

सबसे बढ़िया उत्तर

ठीक है, तो <button> का डिफ़ॉल्ट व्यवहार फ़ॉर्म को सबमिट करना है, इसलिए इसमें type="button" विशेषता जोड़ने से यह सबमिट होने से रुक जाएगा।

अगली चीज़ जो आप eventHandler में buttons पर क्लिकों का पता लगाने के लिए चाहते हैं, मेरे लिए सबसे आसान तरीका class="tip-btn" को buttons में जोड़ना है, फिर जावास्क्रिप्ट में इस तरह चुनें:

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 के बाहर रखा गया है, यह उसके अंदर होना चाहिए।

1
K i 23 सितंबर 2021, 18:55

टिप राशि न मिलने का एक कारण, टेक्स्ट फ़ील्ड (टिप-इनपुट) पर टाइप करने पर भी, आपने submitHandler फ़ंक्शन के बाहर inputTip को एक कॉन्स्टेबल के रूप में परिभाषित किया है।
जब भी Reset क्लिक किया जाता है, तो गतिशील रूप से मान प्राप्त करने के लिए,

const inputTip = document.getElementById("tip-input").value; को submitHandler फ़ंक्शन के अंदर परिभाषित किया जाना चाहिए।

0
IsharaM 23 सितंबर 2021, 18:51