运行EventListener时显示${input.value}而非输入内容的问题排查

问题现象 #

点击Add按钮后，页面未渲染输入框的实际文本，而是直接显示${input.value}字符串。

问题原因 #

• 模板字符串语法错误：JavaScript中实现变量插值的模板字符串必须用**反引号（）**包裹，当前使用单引号（'）包裹字符串，导致${input.value}`被当作普通文本输出，无法解析变量值。
• 输入值判断逻辑不严谨：input.value.trim() !=0是将字符串和数字0比较，语义不准确，应直接判断是否为空字符串。

解决方法 #

1. 将设置innerHTML的字符串替换为反引号包裹的模板字符串，让变量正常完成插值。
2. 修正输入值判断条件为input.value.trim() !== ''，精准判断输入是否有效。

修正后的JS代码 #

let input = document.querySelector('#input-item');
let add = document.querySelector('#add-item');
let display = document.querySelector('#display-item');

add.addEventListener('click', () => {
   if (input.value.trim() !== '') {
       let newItem= document.createElement('div');
       newItem.classList.add('item')
       newItem.innerHTML = `<p> ${input.value} </p> <div class="item-btn"> <i class="fa-regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>`

       display.appendChild(newItem);
       input.value= '';
   } else {
       alert('please add an item!')
   }
});

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