使用JavaScript生成HTML示例时输入框值无法传入的解决方法

你的问题出在模板字符串的赋值时机上：

你在页面初始化时就定义了todo_temp变量，此时input.value是空字符串，模板里的${input.value}会直接被替换成空值并固定下来。之后不管输入框里输入什么内容，todo_temp的内容都不会再更新，所以添加的todo项始终是空的。

解决方法一：将模板生成逻辑移入函数内部 #

每次调用addtodo时，再实时生成包含当前输入框值的HTML模板：

function addtodo (){
    // 用trim处理输入空格的情况，避免空内容提交
    if (input.value.trim() === '') {
        alert('please enter something')
    } else {
        // 每次调用函数时才生成模板，获取当前输入框的最新值
        let todo_temp = `<li><div class="todo_text">${input.value}</div><div><button class="edit_bt">edit</button>
<button class="del_bt">delete</button><button class="done_bt">done</button></div></li>`;
        todocon.insertAdjacentHTML('beforeend', todo_temp);
        // 可选：添加完成后清空输入框，优化体验
        input.value = '';
    }
}

解决方法二：用函数返回动态模板 #

把模板生成逻辑封装成函数，每次传入当前输入框的值来获取最新模板：

// 封装模板生成函数
function getTodoItem(text) {
    return `<li><div class="todo_text">${text}</div><div><button class="edit_bt">edit</button>
<button class="del_bt">delete</button><button class="done_bt">done</button></div></li>`;
}

function addtodo (){
    const inputValue = input.value.trim();
    if (inputValue === '') {
        alert('please enter something')
    } else {
        todocon.insertAdjacentHTML('beforeend', getTodoItem(inputValue));
        input.value = '';
    }
}

这两种方法都能确保每次添加todo时，都使用输入框的最新值来生成HTML内容。

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