JavaScript如何获取input输入值并显示在指定class元素中

现有代码的点击回调里只写入了固定字符串Amount:，没有获取.backenduser输入框的输入值，所以无法展示输入的数字。

• 补充获取.backenduser输入框的DOM引用
• 点击事件触发时读取输入框的value值，和Amount:拼接后再赋值给.summe元素

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
// 新增：获取输入框元素
const userInput = document.querySelector('.backenduser');

btncalc.addEventListener('click', function(){
    // 读取输入框内容，拼接后赋值
    const inputValue = userInput.value.trim();
    summetext.textContent = `Amount:${inputValue}`;
});

如果需要避免空输入、非数值输入的异常显示，可以加一层校验：

btncalc.addEventListener('click', function(){
    const inputValue = userInput.value.trim();
    // 校验是否为有效数值
    if (!inputValue || isNaN(Number(inputValue))) {
        summetext.textContent = "请输入有效数值";
        return;
    }
    summetext.textContent = `Amount:${inputValue}`;
});

另外你的HTML里<input class='backenduser'></input>写法不规范，input是自闭合标签，不需要额外的结束标签，直接写<input class='backenduser'>即可。

内容的提问来源于stack exchange，提问作者programmnoob