Pierwsze pytanie brzmi: potrzebuję pomocy w funkcji Usuń. Próbowałem już metody spląt, ale nadal nie mogę tego zdobyć. Po kliknięciu przycisku Usuń element, ten wiersz musi zostać usunięty. Drugie pytanie ma II już umieścić wymagany atrybut w formularzu wejściowym, ale nadal przesyła formularz, gdy pole jest puste.

var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

      var newProduct = {

          product_id : null,
          product_desc : null,
          product_qty : 0,
          product_price : 0.00,
      };
        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;
        

        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

        var html = "<table border='1|1' >";
        html+="<td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Action</td>";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
        html+="<td>"+products[i].product_price+"</td>";
        html+="<td><button type='submit' onClick='deleteProduct();'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart();'/>Add to Cart</button></td>";
        html+="</tr>";
    }
        html+="</table>";
        document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()            
}
    function deleteProduct(product_id) {
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            // DO NOT CHANGE THE 1 HERE
            products.splice(i, 1);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>

<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>

<p id="demo"></p>
</body>
</html>
1
charles 28 czerwiec 2017, 06:28

5 odpowiedzi

Najlepsza odpowiedź

Po pierwsze, będziesz musiał przejść poprawny produkt_id, aby usunąć funkcję. Musisz także wiedzieć, który element, który chcesz usunąć, aby można było wysłać bieżący element, na którym kliknięcie jest naciśnięte, a następnie uzyskać dostęp do jego węzła nadrzędnego, aby go usunąć. Możesz zastąpić skrypt za pomocą następującego kodu:

var qtyTotal = 0;
    var priceTotal = 0;
    var products = [];


    function addProduct() {
        var productID = document.getElementById("productID").value;
        var product_desc = document.getElementById("product_desc").value;
        var qty = document.getElementById("quantity").value;
        // qtyTotal = qtyTotal + parseInt(qty);
        //document.getElementById("qtyTotals").innerHTML=qtyTotal;
        var price = document.getElementById("price").value;

      var newProduct = {

          product_id : null,
          product_desc : null,
          product_qty : 0,
          product_price : 0.00,
      };
        newProduct.product_id = productID;
        newProduct.product_desc = product_desc;
        newProduct.product_qty = qty;
        newProduct.product_price = price;


        products.push(newProduct);

        //console.log("New Product " + JSON.stringify(newProduct))
        //console.log("Products " + JSON.stringify(products))

        var html = "<table id='products-table' border='1|1' >";
        html+="<td>Product ID</td>";
        html+="<td>Product Description</td>";
        html+="<td>Quantity</td>";
        html+="<td>Price</td>";
        html+="<td>Action</td>";
        for (var i = 0; i < products.length; i++) {
        html+="<tr>";
        html+="<td>"+products[i].product_id+"</td>";
        html+="<td>"+products[i].product_desc+"</td>";
        html+="<td>"+products[i].product_qty+"</td>";
        html+="<td>"+products[i].product_price+"</td>";
        html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart();'/>Add to Cart</button></td>";
        html+="</tr>";
    }
        html+="</table>";
        document.getElementById("demo").innerHTML = html;

        document.getElementById("resetbtn").click()            
}
    function deleteProduct(product_id, e) {

    var pTbody = e.parentNode.parentNode.parentNode;
var pTable = pTbody.parentNode;
if((pTbody.children).length === 2)
    pTable.parentNode.removeChild(pTable);
else
    pTbody.removeChild(e.parentNode.parentNode);


    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            // DO NOT CHANGE THE 1 HERE
            products.splice(i, 1);
        }
    }
}
2
Dij 28 czerwiec 2017, 04:37

Problem polega na tym, że modyfikujesz tablicę products bez zmiany HTML wyświetlanego na stronie.

Jeśli dodano kod, aby usunąć określony element {X0}}, wierzę, że problem zostałby rozwiązany.

Na przykład: Możesz dołączyć identyfikator, który odpowiada product_id do każdej tabeli, gdy zostanie utworzony, a następnie usuń tabelę z tym identyfikatorem.

var remove = document.getElementById(product_id);
remove.parentElement.removeChild(remove);
1
clabe45 28 czerwiec 2017, 12:42

Musisz zmienić usunąć {x1}} z submit do button i musisz dodać parametr products[i].product_id dla {{x 4}} funkcji

html+="<td><button type='button' onClick='deleteProduct("+products[i].product_id+");'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart();'/>Add to Cart</button></td>";
0
Tien Nguyen Ngoc 28 czerwiec 2017, 03:43

Twój program obsługi Click wywołuje deleteProduct (), który wywołuje funkcję bez przekazywania wartości produktu_id jako parametru, więc twoje if (products[i].product_id == product_id) nigdy nie oceni się prawdą.

Spróbuj tego:

 html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\");'/>Delete Item</button> &nbsp; <button type='submit' onClick='addCart();'/>Add to Cart</button></td>";

Jeśli chodzi o wymagane pola upewnij się, że masz atrybut typu ustawiony na wszystkich wejściach i przenieś <p id="demo"></p> w formularzu.

0
Alexander Higgins 28 czerwiec 2017, 03:42

Twoim głównym problemem jest to, że nie przekazujesz identyfikatora produktu do funkcji Usuń, a oczekujesz tego na nim.

Ponadto możesz usunąć samego elementu HTML.

Zrobiłem ten fragment. Dodałem identyfikator produktu jako identyfikator elementu wiersza tabeli, więc na funkcji Usuń możesz usunąć go poszukując tego identyfikatora.

Ponadto, jeśli element do usunięcia jest ostatnim na tabeli, tabela zostanie usunięta (dodałem identyfikator do tabeli, dzięki czemu można go usunąć)

var qtyTotal = 0;
var priceTotal = 0;
var products = [];

function addProduct() {
    var productID = document.getElementById("productID").value;
    var product_desc = document.getElementById("product_desc").value;
    var qty = document.getElementById("quantity").value;
    // qtyTotal = qtyTotal + parseInt(qty);
    //document.getElementById("qtyTotals").innerHTML=qtyTotal;
    var price = document.getElementById("price").value;

    var newProduct = {
      product_id : null,
      product_desc : null,
      product_qty : 0,
      product_price : 0.00,
    };
    
    newProduct.product_id = productID;
    newProduct.product_desc = product_desc;
    newProduct.product_qty = qty;
    newProduct.product_price = price;


    products.push(newProduct);

    //console.log("New Product " + JSON.stringify(newProduct))
    //console.log("Products " + JSON.stringify(products))

    var html = "<table id='products-table' border='1|1' >";
    html+="<td>Product ID</td>";
    html+="<td>Product Description</td>";
    html+="<td>Quantity</td>";
    html+="<td>Price</td>";
    html+="<td>Action</td>";
    for (var i = 0; i < products.length; i++) {
      html+="<tr id='"+products[i].product_id+"'>";
      html+="<td>"+products[i].product_id+"</td>";
      html+="<td>"+products[i].product_desc+"</td>";
      html+="<td>"+products[i].product_qty+"</td>";
      html+="<td>"+products[i].product_price+"</td>";
      html+="<td><button type='submit' onClick='deleteProduct("+products[i].product_id+");'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart();'/>Add to Cart</button></td>";
      html+="</tr>";
    }
    
    html+="</table>";
    document.getElementById("demo").innerHTML = html;

    document.getElementById("resetbtn").click()            
}

function deleteProduct(product_id) {
    for(var i = 0; i < products.length; i++) {
        if (products[i].product_id == product_id) {
            // DO NOT CHANGE THE 1 HERE
            products.splice(i, 1);
            var element = document.getElementById(product_id);
            var tableElement = document.getElementById('products-table');
            
            if(!products.length)
              tableElement.parentNode.removeChild(tableElement);
            else
              tableElement.removeChild(element);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart Pure Javascript</title>
</head>

<body>
<form name="order" id="order">
    <table>
        <tr>
            <td>
                <label for="productID">Product ID:</label>
            </td>
            <td>
                <input id="productID" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="product">Product Desc:</label>
            </td>
            <td>
                <input id="product_desc" name="product" type="text" size="28" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">Quantity:</label>
            </td>
            <td>
                <input id="quantity" name="quantity" width="196px" required/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="price">Price:</label>
            </td>
            <td>
                <input id="price" name="price" size="28" required/>
            </td>
        </tr>
    </table>
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >


</form>
<br>

<p id="demo"></p>
</body>
</html>

Mam nadzieję że to pomoże!

1
JV Lobo 28 czerwiec 2017, 04:10