Fatal编程技术网
  • javascript/
  • Javascript 使用js模板显示移除按钮

Javascript 使用js模板显示移除按钮

javascript html

Javascript 使用js模板显示移除按钮,javascript,html,handlebars.js,Javascript,Html,Handlebars.js,以下代码生成一个网站，该网站使用户有机会输入具有相应金额的成分（输入字段） 用户按下添加按钮后，成分和数量的输入显示在表格中。此外，添加行的第三个单元格应该是删除按钮 提供的代码目前唯一不起作用的部分是创建remove按钮。我对web开发和handlebar库都是超级新手 我的问题是如何在使用把手库时正确显示按钮？当前，显示的是实际按钮[object HTMLButtonElement]。我相信这是可能的，但我找不到正确的方法 代码： <html> <head>

以下代码生成一个网站，该网站使用户有机会输入具有相应
金额的
成分
（输入字段）

用户按下
添加
按钮后，
成分
和
数量
的输入显示在表格中。此外，添加行的第三个单元格应该是删除按钮

提供的代码目前唯一不起作用的部分是创建remove按钮。我对web开发和handlebar库都是超级新手

我的问题是如何在使用把手库时正确显示按钮？当前，显示的是实际按钮
[object HTMLButtonElement]
。我相信这是可能的，但我找不到正确的方法

代码：


<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
        <script id="result" type="text/template">
            <tr>
                <td> {{ ingredient }} </td> 
                <td> {{ amount }} </td>
                <td> {{ change }} </td>
            </tr>
        </script>

        <script>
            const template = Handlebars.compile(document.querySelector('#result').innerHTML);

            document.addEventListener('DOMContentLoaded', () => {
                document.querySelector('#add').onclick = ()  => {

                    // create the remove button (HERE IT GOES WRONG)
                    const btn = document.createElement("BUTTON");
                    btn.innerHTML = "remove element";
                    btn.className = "remove";

                    // get the inputs
                    const ingredient = document.querySelector('#ingredient').value;
                    const amount = document.querySelector('#amount').value;

                    const content = template({'ingredient': ingredient, 'amount': amount, 'change': btn});
                    document.querySelector('#tab').innerHTML += content;
                };
            });
        </script>
    </head>
    <body>
        <input type="text" id="ingredient">
        <input type="text" id="amount">
        <button id="add">Add</button>
        <table id="tab">
            <tr>
                <th>Ingredient:</th>
                <th>Amount:</th>
                <th>Change:</th>
            </tr>
        </table>
    </body>
</html>




{{成分}
{{amount}}
{{change}}
const template=handlebar.compile（document.querySelector（'#result'）.innerHTML）；
document.addEventListener（'DOMContentLoaded'，（）=>{
document.querySelector（'#add'）。onclick=（）=>{
//创建删除按钮（此处出错）
const btn=document.createElement（“按钮”）；
btn.innerHTML=“删除元素”；
btn.className=“删除”；
//获取输入
const-component=document.querySelector（“#component”）.value；
const amount=document.querySelector（“#amount”）.value；
常量内容=模板（{'component'：成分，'amount'：金额，'change'：btn}）；
document.querySelector（“#tab”）.innerHTML+=content；
};
});
添加
成分：
数量：
更改：



非常感谢您的帮助。
您正在混合两种不同的方式向DOM添加内容。第一种方法是使用Handlebar将HTML模板字符串编译成一个函数，当传递给数据上下文对象时，该函数将返回一个插值HTML字符串。第二种方法是使用
document.createElement
创建DOM节点，这些节点将直接插入到DOM中，方法如下

您正在创建的
btn
变量将被分配给它
document.createElement（“按钮”）
的结果，这是一个对象。当您将其传递给编译的模板函数时，Handlebar只知道尝试对其进行字符串化，以便使其成为渲染输出的一部分。当这个对象被字符串化时，它会生成“[Object HtmlButtoneElement]”

您可以做一些不愉快的工作来获取button元素的呈现HTML字符串，并将其传递给模板函数，但更好的做法是将HTMLing留给模板

这意味着删除所有
常量btn
代码，并用所需的HTML替换模板中的变量

因此：


<td> {{ change }} </td>



{{change}


变成：


<td><button class="remove">remove element</button></td>



删除元素


当然，下一个棘手的部分是如何将单击处理程序绑定到这些动态添加的按钮；但这超出了这个问题的范围