JS Calculator(Equal Button and Clear Button) is not working

JavaScript
1 
**Html code:**
<body>
    <div class="container">
        <form>
            <input type="text" name="" id="" class="input">
        </form>
        <div class="buttons">
            <!-- Operational Buttons-->
       
            <button type="button" class="btn btn-yellow " data="*">*</button>
            <button type="button" class="btn btn-yellow" data="/">/</button>
            <button type="button" class="btn btn-yellow" data="-">-</button>
            <button type="button" class="btn btn-yellow" data="+">+</button>

            <!-- Numerical buttons -->
            <button type="button" class="btn btn-grey" data=".">.</button>
            <button type="button" class="btn btn-grey" data="9">9</button>
            <button type="button" class="btn btn-grey" data="8">8</button>
            <button type="button" class="btn btn-grey"data="7">7</button>
            <button type="button" class="btn btn-grey"data="6">6</button>
            <button type="button" class="btn btn-grey" data="5">5</button>
            <button type="button" class="btn btn-grey" data="4">4</button>
            <button type="button" class="btn btn-grey" data="3">3</button>
            <button type="button" class="btn btn-grey" data="2">2</button>
            <button type="button" class="btn btn-grey" data="1">1</button>
            <button type="button" class="btn btn-grey" data="0">0</button>
            <button type="button" class="btn btn-equal">=</button>
            <button type="button" class="btn btn-clear ">C</button>
        </div>

    </div>
    <script src="calculator.js"></script>
</body>

**JS code:**
const All_buttons = document.querySelectorAll('.btn');
const input_field = document.querySelector('.input');
const equal_btn = document.querySelector('.btn-equal');
const clear_btn = document.querySelector('.btn-clear');

for(let i=0; i<=All_buttons.length; i++){
    All_buttons[i].addEventListener('click',()=>{
        let result = All_buttons[i].getAttribute('data');
        input_field.value += result;
    })
}

equal_btn.addEventListener('click',()=>{
    let value = eval(input_field.value);
    input_field.value = value;
})

clear_btn.addEventListener('click',()=>{
    input_field.value = '';
})
2

Can you please describe your issue in more detail in your post and provide a live link to your project?

3
4

My equal and clear both button’s are not working … i don’t know why

5

What do you mean with “they’re not working”? Do they not respond at all, or are they not doing what they’re supposed to do?

From a look at your pen, you’re attaching two event listeners to both the equals- and the clear-button. They’re in your list of all_btns, and after looping over those, you attach another event listener to them individually. As I’ve no idea what the exact problem is, I can’t tell if that fixes your issues.

6

just add two values and you will know the problem …

7

Oh !! now i seeeee … where the problem is !!! Thank you so much

8

where is the problem i couldn’t find it