Limiter le nombre de caractère

Bonjour, j'aimerais limiter le nombre maximum de caractère utilisables. Pour cela j'ai fais quelques essaie peu concluant. Je viens donc solliciter votre aide. Comment faire pour que ma fonction (fonctionnelle) ne s'applique que lorsque il y a moins de 10 caractères dans la variable result ? Merci d'avance pour votre aide.

Voici mon code JavaScript et HTML :

const buttons = document.querySelectorAll(".btn")
const result = document.getElementById("result")

buttons.forEach((button) => {
    button.addEventListener("click", (e) => {
        if (result.value.length < 10) {
            result.textContent += e.target.value
        }else{}
    })
})

        <div class="calculator">
            <h3 id="result"></h3>
            <button class="btn" id="nine" value="9">9</button>
            <button class="btn" id="eight" value="8">8</button>
            <button class="btn" id="seven" value="7">7</button>
            <button class="btn" id="six" value="6">6</button>
            <button class="btn" id="five" value="5">5</button>
            <button class="btn" id="four" value="4">4</button>
            <button class="btn" id="three" value="3">3</button>
            <button class="btn" id="two" value="2">2</button>
            <button class="btn" id="one" value="1">1</button>
            <button class="btn" id="zero" value="0">0</button>
            <button class="btn" id="dot" value=".">.</button>
            <button class="btn" id="plus" value="+">+</button>
            <button class="btn" id="minus" value="-">-</button>
            <button class="btn" id="times" value="*">*</button>
            <button class="btn" id="div" value="/">/</button>
            <button class="btn" id="clear">C</button>
            <button class="btn" id="equal">=</button>
            <button class="btn" id="parenthesis-1" value="(">(</button>
            <button class="btn" id="parenthesis-2" value=")">)</button>
        </div>