my projects functionality works with live server extension only

I just created my first calculator and it works perfectly on live server, but not directly if opening via HTML file. After placing js, css, img and audio file in separate folder and changing the path in HTML it started working, but the arrow function that serves to delete symbols still not working if opening directly. Any ideas?

  <section>
    <p>Olena's <br> calculator</p>
    <div class="container">
        <div class="pic"><img src="files/pic.png" alt="pic"></div>
        <div class="display" id="dis"></div>
            <div class="buttons">
                <div class="button" id="c">C</div>
                <div class="button" id="pro">.</div>
                <div class="button" id="larr">&larr;</div>
                <div class="button" id="sub">/</div>
                <div class="button" id="seven">7</div>
                <div class="button" id="eight">8</div>
                <div class="button" id="nine">9</div>
                <div class="button" id="mul">*</div>
                <div class="button" id="four">4</div>
                <div class="button" id="five">5</div>
                <div class="button" id="six">6</div>
                <div class="button" id="di">-</div>
                <div class="button" id="one">1</div>
                <div class="button" id="two">2</div>
                <div class="button" id="three">3</div>
                <div class="button" id="plus">+</div>
                <div class="button" id="zero">(</div>
                <div class="button" id="dblzero">0</div>
                <div class="button" id="point">)</div>
                <div class="button" id="equal">=</div>
            </div>
    </div>
</section>


<audio src="files/mixkit-plastic-bubble-click-1124.wav" id="audio"></audio>

<script src="files/index.js"></script>

buttons.map(but => {
but.addEventListener('click', (key) => {
    console.log(key.target.innerText)
    switch (key.target.innerText) {
        case 'C':  
            display.innerText = ' '
        break
        case '←':
            if (display.innerText) {
            display.innerText = display.innerText.slice(0, -1)
            break
            }
        case '=':
            try{
            display.innerText = eval(display.innerText)
            break
            } catch {
                display.innerText = 'Помилка'
                break
            }
        default:
            display.innerText += key.target.innerText 
    }
})
})

const audio = document.getElementById('audio')

document.onclick = () => audio.play();