从数组中填充表单

Question

我想从数组中填充表单，然后从数组中删除该元素。所以当我点击"填充它"按钮-表单应该被填充，现在数组应该没有那个元素。问题是，数组不弹出，移位或切片，它总是加载相同的数据到表单字段。

我有:

<h3><input class="FormControl" placeholder="Discussion Title"></h3>
<textarea class="Composer-flexible" placeholder="Write something..."  style="height: 166.2px;"></textarea>

我代码:

var button = document.createElement("button");
button.innerHTML = "Fill It";

var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

button.addEventListener ("click", function() {
var arr = 
[["title1","post1"],["title2","post2"],["title3","post3"]];
var post = arr[0][1];
var title= arr[0][0];
document.getElementsByClassName("FormControl")[0].value=title;
document.getElementsByClassName("Composer-flexible")[0].value = post;
var arr=arr.slice(1);
console.log(arr);
});

小提琴链接:

https://jsfiddle.net/q1vc26oe/2/

在我填完之后，我必须稍微审查一下，然后我将提交它。但是下次当我加载html页面并尝试填写相同的表单时，问题发生了，但这次使用'title2'和'post2'，它加载'title1'和'post1'，因为数组没有弹出，移位或切片。怎么做呢?

此外(这将是下一步，当我确保脚本运行良好)如何提交它，不是自动的，但在15秒后，因为我想在提交之前有一个简短的审查(这不是现在的大优先级，所以你可以添加到你的答案或不....)

Answer 1

这将是你的工作代码:-

var button = document.createElement("button");
button.innerHTML = "Fill It";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
var arr = [
["title1", "post1"],
["title2", "post2"],
["title3", "post3"]
];
button.addEventListener("click", function() {
var post = arr[0][1];
var title = arr[0][0];
document.getElementsByClassName("FormControl")[0].value = title;
document.getElementsByClassName("Composer-flexible")[0].value = post;
arr = arr.slice(1);
console.log(arr);
});

每次点击按钮都创建一个新的数组(命名为'arr')，所以请确保只创建一次数组。

确保你检查数组是否为空点击