添加HTML文本框来修改JS数组项？最佳实践和学习资源？欢迎任何建议

Question

这是我当前的应用程序：JSFiddle

给出以下数组中的以下数据：

var mains = ["Chicken sammich", " Lasagna", " Plain Pizza", " Fried Beefcake", " Soylent Shake"];
var sides = ["Freedom fries", " Apple slices", " Tater tots", " Sad salad", " Hard-boiled egg"];
var desserts = ["Rice Pudding", " Gluten-free cookie", " Cheesecake Delux", " Sundae", " Graham Crackers"];

用户是否可以通过简单的方法从HTML修改这些条目？还是应该为此使用JS对象？

基本上，代码可以正常工作，我想学习如何添加一些HTML表单和按钮以替换这些表单或添加/删除它们。我知道这听起来需要做很多工作，所以我只想在这里提供一些[[提示，因为我想学习！

我想我可以创建将.push和.pop数组元素的按钮。类似....

<form>
<input type="text" name="Add a Main"> <script> tbody.appendChild(tr);</script> 

button1.addEventListener(onClick)(runFunctionToAppendItemToArray ?)

请告知。 

Answer 1

您可以使用Vue之类的框架。或者，您也可以尝试使用您描述的vanila JS来构建它。请参阅我极其丑陋但有效的示例。

//your data
var data = ["a", "b"];

//search dom elements
var root = document.getElementById('list_editor');
var list = root.querySelector('lo');
var input = root.querySelector('input');
var btn = root.querySelector('button');
var arr_preview = root.querySelector('p');


// initialize
btn.addEventListener('click', new_item, false);
render_list();

function new_item(){
  data.push(input.value);
  render_list();
  input.value = '';
}

function render_list(){
  // wipe the list
  list.innerHTML = '';
  
  // I know For in should not be used with array
  for(var i in data){
  
    // create list item <li>
    var el = document.createElement('li');
    el.innerText = data[i];
    
    // create button to remove the item
    var rem_el = document.createElement('button');
    rem_el.innerText = 'remove';
    rem_el.addEventListener('click', rem(i), false);
    el.appendChild(rem_el);
    
    // insert to the DOM
    list.appendChild(el);
  }
  arr_preview.innerText = JSON.stringify(data);
}

// fn factory create scope, maybe not necesarry?
function rem(j){
  return function(){
    data.splice(j, 1);
    render_list();
   }
  
}

<div id="list_editor">
<lo>
</lo>
<input type="text" placeholder="new item?"><button>insert</button>
<p></p>
</div>

Answer 2

这是我为实现您的目标所做的尝试。我使用了jquery，因为您的代码中已经包含了它。我正在使用循环填充进餐清单，以避免在生成随机进餐时冻结UI。我希望代码足够清晰，以便您进一步开发。

const MEAL_COUNT = 31;

const wrapper = $('#meals');

var loop; // the timeout loop

var mains = ["Chicken sammich", "Lasagna", "Plain Pizza", "Fried Beefcake", "Soylent Shake"];
var sides = ["Freedom fries", "Apple slices", "Tater tots", "Sad salad", "Hard-boiled egg"];
var desserts = ["Rice Pudding", "Gluten-free cookie", "Cheesecake Delux", "Sundae", "Graham Crackers"];

var mealIdentifiers = [];

// here we will save the current selected dishes
var currentMains = [];
var currentSides = [];
var currentDesserts = [];

// this function automates the creation of the checkboxes 
var checkboxes = function(array) {
  var boxes = [];
  for (var item of array) {
    let box = $('<label><input type="checkbox" name="' + item + '" checked>' + item + '</label>');
    boxes.push(box);
  }
  return boxes;
};

$('#mains').append(checkboxes(mains));
$('#sides').append(checkboxes(sides));
$('#desserts').append(checkboxes(desserts));

// this is where we create new menu lists
var newMenu = function() {
  // first lets empty the old lists
  wrapper.empty();
  mealIdentifiers = [];
  
  // now lets save the current selected dishes
  currentMains = [];
  $('#mains input:checked').each(function(i, item) {
    currentMains.push(item.name);
  });

  currentSides = [];
  $('#sides input:checked').each(function(i, item) {
    currentSides.push(item.name);
  });

  currentDesserts = [];
  $('#desserts input:checked').each(function(i, item) {
    currentDesserts.push(item.name);
  });

  // now we start the loop (only runs once)
  if (!loop) loop = setInterval(addItem, 10);
};

// this add new meals like in your code
var addItem = function () {
  if (mealIdentifiers.length < MEAL_COUNT) {

    // here I changed it to use the current items
    let mainId = Math.floor(Math.random() * currentMains.length);
    let sideId = Math.floor(Math.random() * currentSides.length);
    let dessertId = Math.floor(Math.random() * currentDesserts.length);

    // I added hashes between the integers to avoid false duplicates on longer lists
    // eg: before 11, 2, 3 would be the same as 1, 12, 3 ( 1123 == 1123 )
    // I changed it so 11#2#3 !== 1#12#3
    let mealId = [mainId, sideId, dessertId].join('#');

    // if there's no meal like that already
    if (!mealIdentifiers.includes(mealId)) {
      mealIdentifiers.push(mealId);

      let container = $('<div class="container">');

      container.append('<div class="date">' + (mealIdentifiers.length) + '</div>');
      container.append('<div class="main">' + (currentMains[mainId] || 'No main'));
      container.append('<div class="side">' + (currentSides[sideId] || 'No side'));
      container.append('<div class="dessert">' + (currentDesserts[dessertId] || 'No dessert'));

      wrapper.append(container);
    }
  }
};

// create the first menu
newMenu();

// create new menus on checkbox change
$('#customize').on('change', 'input', newMenu);

.container {
  border-bottom: 1px solid gray;
  float: center;
}

#mealsDiv {
  float: center;
}

body {
  background-color: black;
  color: white;
}

.main {
  font-size: 16px;
  font-weight: bold;
  color: #7C9BC8;
}

.side {
  font-size: 14px;
  color: #B878C8;
}

.dessert {
  color: #88C740;
  font-size: 14px;
}

#mains {
  color: #7C9BC8;
}

#sides {
  color: #B878C8;
}

#desserts {
  color: #88C740;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>This handy app helps you plan the perfect cafeteria meal without boring repetition! </h3>

<div id="customize">
  <h3>Current main dishes offered:</h3>
  <div id="mains"></div>
  <h3>Current side dishes offered:</h3>
  <div id="sides"></div>
  <h3>Current desserts offered:</h3>
  <div id="desserts"></div>
</div>

<div id="meals"></div>