Как мне добавить кнопки, которые принимают заказы на удаление и очистку на моей веб-странице с использованием массивов?

ProgramBox

Как мне добавить кнопки, которые принимают заказы на удаление и очистку на моей веб-странице с использованием массивов?

Post author:admin
Запись опубликована:4 ноября, 2022
Post category:Вопросы по программированию

#javascript #forms #dom #dom-events #rendering

#javascript #формы #dom #dom-события #рендеринг

Вопрос:

Мне нужно создать веб-страницу, которая может добавлять, удалять и очищать заказы внутри текстового поля с применением массивов. Условия следующие:

1. Изначально внутри массива программы не должно быть элемента / значения.

Значение / элемент будут удалены после нажатия кнопки удаления заказа.
Он будет содержать значение только при нажатии кнопки Добавить заказ.

Если кто-то вводит значение и нажимает «Добавить заказ»

Он должен добавить значение внутри массива программы
Появляется окно с предупреждением «Заказ добавлен».
Заказ также должен отображаться во второй ячейке таблицы под текстом «Заказ:»

3. Если кто-то вводит значение и нажимает «Удалить заказ»

Добавленное значение в массиве должно быть удалено
Должно отображаться окно с предупреждением «Заказ удален».
Введенный порядок также должен быть удален во второй ячейке таблицы под текстом «Порядок:».

4. Если кто-то нажимает «Очистить ввод»

Содержимое текстового поля должно быть удалено

Хотя я изучил концепции массивов, у меня нет идеи о том, как применить это при создании этого веб-сайта. Я уже настроил оповещения и макет, но не смог заставить заказы появляться во второй ячейке таблицы.

 <!DOCTYPE html>
 <html lang="en">
     <head>
    <style>
   body {background-color: #a8f00e;} 
   table, th, td {
   border: 1px solid black;
  background-color: #fff714;
  text-align: center;    
  }
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

   <body>
     <h1>Point of Sale Program</h1>
   <table style="width:100%">
   <tr>
  <th>
  <h2> Add Order
  <br> 
  <form action="/action_page.php" method="get">
  <input type="text"> 
   <br>
  <button onclick="Add()">Add Order</button>
  <button onclick="Delete()">Delete Order</button>
   <button type="reset" value="Reset">Clear Input</button>
 </h2>
  </th>

<th>Order</th> 

  <script>
  function Add() {
    alert("Order had been added");
  } 
  function Delete() {
    alert("Order had been deleted");
  }   
  </script>  

 </body>
 </html>

Ответ №1:

Вы определяете свой массив так var itemArray = []

затем вы добавляете элементы в свой массив с помощью itemArray.push('Item Name') и удаляете элементы массива с помощью splice() метода, чтобы просто очистить свой массив, вы повторно объявляете его таким образом itemArray = []

Надеюсь, это поможет вам начать!

Ответ №2:

Это то, что вам нужно? или вам нужна форма, чтобы вы могли отправлять информацию?

 <h1>Point of Sale Program</h1>
<table id="OrdersTable" style="width: 100%;">
    <thead>
        <tr>
            <td><h2>Add Order</h2></td>
        </tr>
        <tr>
            <td>
                <input type="text" id="OrderName">
            </td>
            <td> 
                <button id="AddButton">Add</button>
                <button id="ClearInputButton">Clear</button>
            </td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <td><button onclick="clearAllOrders()">Clear Orders</button></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<script>

    // Orders Array
    var orders = [];

    // Adds order to Array
    function addOrder(text){
        orders.push(text);
        alert("Order has been added");
        drawOrders();
    }

    // Removes order based on position in array
    function removeOrder(index){
        orders.splice(index,1);
        alert("Order has been deleted");
        drawOrders();
    }

    // Removes all orders from the Array
    function clearAllOrders(){
        orders = [];
        drawOrders();
    }

    // Draw/Redraw the orders into the table
    function drawOrders(){
        // Select the Body of the table or <tbody></tbody>
        var tableBody = document.querySelector("#OrdersTable tbody");
        // clear the table body
        var body = tableBody.innerHTML = "";
        // Then add all the orders into the table body
        orders.forEach((order,index)=>{
            let deletebutton = document.createElement("button");
            deletebutton.innerText = "Delete";
            deletebutton.onclick = function(){removeOrder(index)}; 
            let row = document.createElement("tr");
            let firstCell = document.createElement("td");
            firstCell.innerText = order;
            let secondCell = document.createElement("td");
            secondCell.appendChild(deletebutton);
            row.appendChild(firstCell);
            row.appendChild(secondCell);
            tableBody.appendChild(row);
        });
    }
    // Attach onclick event to Add button and empty the textbox when order is added 
    document.querySelector("#AddButton").onclick = function(){
        var textInput = document.querySelector("#OrderName");
        addOrder(textInput.value);
        textInput.value = "";
    }
    // Attach onclick event to clear input button so when it's clicked the textbox is emptied 
    document.querySelector("#ClearInputButton").onclick = function(){
        document.querySelector('#OrderName').value = "";
    }

</script>

Ответ №3:

 const itemTemplateHtml = `<li>
  <span data-item>Invalid Item</span>
  <button type="button" data-delete-item>Delete Item</button>
</li>`;
let itemTemplate;

function emptyElementNode(elmNode) {
  Array
    .from(elmNode.childNodes)
    .forEach(node => node.remove());
}
function createTemplateFromCode(templateHtml) {
  const container = document.createElement('div');
  container.innerHTML = templateHtml;

  return container.firstElementChild;
}

function logListOrderData(orderList, elmFormOrders) {
  // console.clear();
  console.log('orderList :', JSON.stringify(orderList));
  console.log('elmFormOrders.value :', elmFormOrders.value);
  console.log('n');
}

function updateOrderListFormData(elmOrderList, elmFormOrders) {
  const orderList = Array
    .from(elmOrderList.children)
    .reduce((list, elm) =>
      list.concat(
        elm.querySelector('[data-item]').dataset.value.trim() || []
      ), []
    );
  elmFormOrders.value = orderList.join(',');

  logListOrderData(orderList, elmFormOrders);
}

function addOrderListItem(value, elmOrderList, elmFormOrders) {
  // value = value.replace((/,/g), "\,");

  const elmListItem = itemTemplate.cloneNode(true);
  const elmDataItem = elmListItem.querySelector('[data-item]');

  elmDataItem.dataset.value = value;
  elmDataItem.textContent = value;
  elmListItem
    .querySelector('[data-delete-item]')
    .addEventListener('click', handleDeleteItemWithBoundContext.bind({
      elmListItem,
      elmOrderList,
      elmFormOrders
    }));
  elmOrderList.appendChild(elmListItem);

  updateOrderListFormData(elmOrderList, elmFormOrders);
}

function handleAddItemWithBoundContext(/*evt*/) {
  const { elmOrderItem, elmOrderList, elmFormOrders } = this;
  
  const value = elmOrderItem.value.trim();
  elmOrderItem.value = value;

  if (value !== '') {
    addOrderListItem(value, elmOrderList, elmFormOrders);
  }
}
function handleDeleteItemWithBoundContext(/*evt*/) {
  const { elmListItem, elmOrderList, elmFormOrders } = this;

  elmListItem.remove();

  updateOrderListFormData(elmOrderList, elmFormOrders);
}
function handleClearOrdersWithBoundContext(/*evt*/) {
  const { elmOrderItem, elmOrderList, elmFormOrders } = this;

  elmOrderItem.value = '';
  elmFormOrders.value = '';

  emptyElementNode(elmOrderList);

  updateOrderListFormData(elmOrderList, elmFormOrders);
}


function initializeAddItem(elmAddItem, elmOrderItem, elmOrderList, elmFormOrders) {
  elmAddItem.addEventListener('click', handleAddItemWithBoundContext.bind({
    elmOrderItem,
    elmOrderList,
    elmFormOrders,
  }));
}
function initializeClearOrders(elmClearOrders, elmOrderItem, elmOrderList, elmFormOrders) {
  if (elmClearOrders) {
    elmClearOrders.addEventListener('click', handleClearOrdersWithBoundContext.bind({
      elmOrderItem,
      elmOrderList,
      elmFormOrders,
    }));
  }
}

function initializeOrders() {
  const elmOrders = document.querySelector('#orders');

  const elmOrderItem = elmOrders.querySelector('[data-order-item]');
  const elmAddItem = elmOrders.querySelector('[data-add-item]');

  const elmOrdersForm = elmOrderItem amp;amp; elmAddItem amp;amp; elmOrders.querySelector('form');

  const elmOrderList = elmOrdersForm amp;amp; elmOrdersForm.querySelector('.order-list');
  const elmFormOrders = elmOrdersForm amp;amp; elmOrdersForm.querySelector('[data-form-orders]');

  itemTemplate = elmOrderList amp;amp; elmFormOrders amp;amp; createTemplateFromCode(itemTemplateHtml);
  if (itemTemplate) {

    initializeAddItem(elmAddItem, elmOrderItem, elmOrderList, elmFormOrders);
    initializeClearOrders(
      elmOrders.querySelector('[data-clear-orders]'),
      elmOrderItem, elmOrderList, elmFormOrders
    );

    updateOrderListFormData(elmOrderList, elmFormOrders);
  }
}

/*export default */initializeOrders();

 body { background-color: #a8f00e; font-size: x-small; }
h1, h2 { margin: 0; font-size: unset;}
button, textarea, [type="text"] { font-size: x-small; }
article, fieldset, li { position: relative; }
button { position: absolute; right: 5px; }
li button { bottom: 2px; }
article > button { right: 9px; } 
form { margin-bottom: 7px; }
ol {
  margin: -1px 3px 5px 2px; padding: 0 0 0 8px;
  border: 1px solid black;
  background-color: #fff714;
}
ol:empty { border: none; }
li { margin: 0 0 0 10px; padding: 4px 0 5px 0; }
#orders { width: 40%; }

.as-console-wrapper {
  min-height: 100%!important; 
  width: 59%;
  top: 0;
  left: auto!important;
  right: 0!important;
}

 <h1>Point of Sale Program</h1>

<article id="orders">
  <fieldset>
    <legend>Place an Order</legend>

    <input type="text" data-order-item placeholder="Put an Order Item" />
    <button type="button" data-add-item>Add Item</button>
  </fieldset>

  <form action="/action_page.php" method="get">
    <ol class='order-list'></ol>
    <input type="hidden" name="order_list" data-form-orders value="" />
  </form>

  <button type="reset" data-clear-orders>Clear Order List</button>
</article>

Развернуть фрагмент