Display remove button with js templating
Question
The following code generates a website which gives the user the opportunity to input a ingredient with corresponding amount (the input fields).
After the user pressed the add button the inputs of ingredient and amount are displayed in a table. Furthermore the third cell of the added row should be a remove button .
The only part of the provided code which is not working at the moment is the creation of the remove button. I am super new to web development and also to the handlebar library.
My question is how I can correctly display the button while using the handlebar library? Currently, instead of the actual button [object HTMLButtonElement] gets displayed. I am sure this is possible but I couldn't find the right way.
Code:
<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>
I am grateful for any help.
1 answers
solution1
1 ACCPTED 2020-04-22 19:45:39
You are mixing two different ways of adding content to the DOM. The first is using Handlebars to compile a HTML template String into a function that will return an interpolated HTML string when passed a data context Object. The second is using document.createElement to create DOM nodes that will be directly inserted into the DOM with DOM methods like .appendChild() .
The btn variable you are creating is getting assigned to it the result of document.createElement("BUTTON") , which is an HTML Button Element Object. When you pass this to your compiled template function, Handlebars only knows to try to stringify it in order to make it a part of the rendered output. When this Object is stringified, it produces "[object HTMLButtonElement]".
You could do some unpleasant work to get the rendered HTML string of your button element and pass that to your template function, but the better thing to do would be to leave the HTMLing to the template.
This would mean removing all of your const btn code and replacing that variable in your template with the desired HTML.
Therefore:
<td> {{ change }} </td>
Becomes:
<td><button class="remove">remove element</button></td>
Of course the next tricky part becomes how to bind a click handler to these dynamically added buttons; but this is outside the scope of this question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.