I have created a function to populate two arrays with movie information and display it in a table on the screen. However, I am struggling to make the delete button appear and to separate the titles and directors into different columns. How can I achieve this?
var titles = [];
var names = [];
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var messageBox = document.getElementById("display");
function insert ( ) {
titles.push( titleInput.value );
names.push( nameInput.value );
clearAndShow();
}
function clearAndShow () {
// Clear our fields
titleInput.value = "";
nameInput.value = "";
}
// Print the info to a table
function show() {
document.write('<table>');
document.write('<tr><th>Titles</th></tr>');
for (var i = 0; i < titles.length; i++) {
document.write('<tr><td>' + titles[i] + '</td></tr>');
}
document.write('<tr><th>Directors</th></tr>');
for (var i = 0; i < names.length; i++) {
document.write('<tr><td>' + names[i] + '</td></tr>');
}
document.write('</table>');
}
//delete Button-reset