我不认为这是向节点添加事件侦听器的正确语法。另外，在添加侦听器之前，请确保已加载并解析DOM。
我认为下面的代码应该可以完成您想要的工作（假设DOM节点存在并且已经被解析）：

const input = document.getElementById('username');
const characterCountDisplay = document.getElementById('caratteriRimanentiUsername')
let inputLength = 0;

input.addEventListener('keyup', event => {
    inputLength = event.target.value.length
    characterCountDisplay.textContent = `Caratteri: ${inputLength}/30`
})

要澄清您关于.onkeyup的问题：
如果在同一元素上再次使用，确实会出现问题：
element.onkeyup将覆盖先前分配的.onkeyup（甚至是内联 element onkeyup="" 事件处理程序）。
element.addEventListener('keyup', yourFunction)通常是首选方法，因为它允许您将多个eventListener添加到同一个元素（并且remove.addEventListener仍然允许您在需要时删除它们）。

您需要在创建input元素之后执行脚本，这可以通过将脚本放在元素之后或侦听onload之类的事件以绑定onkeyup事件来实现。

<div class="input-box">
  <span class="details">Username</span>
  <input id="username" type="text" name="username" placeholder="Inserisci il tuo username">
  <span id="caratteriRimanentiUsername">Caratteri: 0/30</span>
</div>

<script>
document.getElementById('username').onkeyup = function() {
  document.getElementById('caratteriRimanentiUsername').innerText = "Caratteri: " + this.value.length + "/30";
};
</script>