<!-- --------------contatore------------------- -->

<button id="num" onclick="this.textContent = 1 + parseInt(this.textContent)">1</button>
<style>
#num { min-width: 70px; height: auto; font-size: 60px; }
</style>


<!-- --------------clicks---------------------- -->
<div id="buttons_section">
<button>previous</button> <button>next</button>
</div>

<script>
    var buttons = document.querySelectorAll("#buttons_section > button")

    for (var button of buttons)
        button.onclick = function (event) {
            var button = event.target
            alert("click received")
            alert(button.innerText)
        }

</script>


<!-- ---------------somma---------------------- -->

<!-- interfaccia grafica in HTML -->
<input type="number" id="x" placeholder="numero x">
<input type="number" id="y" placeholder="numero y">
<div>il risultato è: <span id="risultato">0</span></div>
<!-- logica software in JavaScript -->
<script>
    x.oninput = calc; y.oninput = calc
    x.value = 0; y.value = 0
    function calc() { risultato.textContent = parseFloat(x.value) + parseFloat(y.value) }
    calc()
</script>


<!-- ------------------percentuale------------- -->

<p>
inputs:
<input type="number" id="numero" placeholder="numero in input">

<input type="number" id="percentuale" placeholder="percentuale">
</p>

<p>
percentuale applicata:
<span id="risultato"></span>
</p>

<script>
    numero.oninput = applica
    percentuale.oninput = applica
    function applica() {
        risultato.textContent = numero.value * percentuale.value / 100
    }
</script>