مشكله في مشروع Front End يتم إضافة البيانات مرتين بالخطأ بدل مرة واحدة في جافاسكربت

Mohammed Hhhh · 21 مايو 2022

السلام عليكم و رحمة الله وبركاته

انا اقوم بعمل مشروع crud و لكن صادفتني مشكله

المشكله هي في ميزة ال update عندما اقوم ب عمل update فأنها لا تقوم بالعمل بشكل جيد

و عندما اقوم بعمل creat ينشأ لي عنصرين و ليس عنصر واحد

مع اني حاولت كثيرا لكي اقوم بأصلاح المشاكل التاليه

ما هو الحل و شكرا

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="pstyle.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>CRUDs</title>

</head>

<body>
    <div class="crud">
        <!-- ----- -->
        <div class="head">
            <h2> <img src="/project/photos/cruds.png" alt="" width="40px">
                <p>crud</p>
            </h2>
            <a target="_blank" href="/ourTeam.html" class="ourTeam">Our Team</a>
        </div>
        <!-- ----- -->

        <div class="inputs">
            <input type="text" name="" id="title" placeholder="title">
            <div class="price">
                <input onkeyup="getTotal()" type="number" value="" id="price" placeholder="price">
                <input onkeyup="getTotal()" type="number" value="" id="taxes" placeholder="taxes">
                <input onkeyup="getTotal()" type="number" value="" id="ads" placeholder="ads">
                <input onkeyup="getTotal()" type="number" value="" id="discount" placeholder="discount">
                <small id="total"></small>
            </div>
            <div class="containerOfcreat">
            <div class="creatdiv">
                <input type="text" id="count" placeholder="count">
                <input type="text" id="category" placeholder="category">
            </div>
                <button id="submit"> <img src="/project/photos/creat.png" alt="noIMGerror" width="20px"> Creat</button>
            </div>
            
        </div>
        <!-- ----- -->
        <div class="outputs">
            <div class="searchBlock">
                <input type="text" id="search" placeholder="search">
                <div class="btnSearch">
                    <button id="searchTitle">Search By Title</button>
                    <button id="searchTCategory">Search By Category</button>
                </div>
            </div>
        </div>
        <div id="deletAll"></div>
        <table>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>price</th>
                <th>taxes</th>
                <th>discount</th>
                <th>total</th>
                <th>ads</th>
                <th>category</th>
                <th>update</th>
                <th>delet</th>
            </tr>
            <tbody id="tbody">

            </tbody>
        </table>
    </div>
    <footer>
        <p>Proudly made by Mohammed Haimour 😁</p>


    </footer>


    <script src="JSfile.js"></script>
</body>

</html>

let title = document.getElementById("title");
let price = document.getElementById("price");
let taxes = document.getElementById("taxes");
let ads = document.getElementById("ads");
let discount = document.getElementById("discount");
let total = document.getElementById("total");
let count = document.getElementById("count");
let category = document.getElementById("category");
let submit = document.getElementById("submit");
// console.log(title ,price ,taxes ,ads ,discount, total,count,category,submit);

let mood = "creat";
let tmp;

// count total
function getTotal() {
  if (price.value != "") {
    let result = +price.value + +ads.value + +taxes.value - +discount.value;
    total.innerHTML = result;
    total.style.background = "#040";
  } else {
    total.innerHTML = "";
    total.style.background = "#421";
  }
}

// creat product
// pro == product
let dataPro;

if (localStorage.product != null) {
  dataPro = JSON.parse(localStorage.product);
} else {
  dataPro = [];
}

submit.onclick = function () {
  let newPro = {
    title: title.value,
    price: price.value,
    taxes: taxes.value,
    ads: ads.value,
    discount: discount.value,
    total: total.innerHTML,
    count: count.value,
    category: category.value,
  };
  if (mood === "creat") {
    if (newPro.count > 1) {
      for (let i = 0; i < newPro.count; i++) {
        dataPro.push(newPro);
      }
    } else {
      dataPro.push(newPro);
    }
  }else{
    dataPro[tmp] = newPro;
  }

  dataPro.push(newPro);
  // save localstorage
  localStorage.setItem("product", JSON.stringify(dataPro));

  clearData();
};

// clear inoupts
function clearData() {
  title.value = "";
  price.value = "";
  taxes.value = "";
  total.innerHTML = "";
  count.value = "";
  category.value = "";
}

// read
function showData() {
  let tabel = "";
  for (let i = 0; i < dataPro.length; i++) {
    tabel += `
    
    <tr>
        <td>${i}</td>
        <td>${dataPro[i].title}</td>
        <td>${dataPro[i].price}</td>
        <td>${dataPro[i].taxes}</td>
        <td>${dataPro[i].ads}</td>
        <td>${dataPro[i].discount}</td>
        <td>${dataPro[i].total}</td>
        <td>${dataPro[i].category}</td>
        <td><button onclick="updateData(${i})" id="update">update</button></td>
        <td><button onclick="deletData(${i})" id="delet">delet</button></td>
    </tr>
        `;
  }

  document.getElementById("tbody").innerHTML = tabel;

  let btnDelt = document.getElementById("deletAll");
  if (dataPro.length > 0) {
    btnDelt.innerHTML = `
        <button onclick="deletAll()">delet All    -${dataPro.length}- </button>
        `;
  } else {
    btnDelt.innerHTML = "";
  }
}

showData();
var newww = showData();

// delet
function deletData(i) {
  dataPro.splice(i, 1);
  localStorage.product = JSON.stringify(dataPro);
  showData();
}

function deletAll() {
  localStorage.clear();
  dataPro.splice(0);
  showData();
}

// count

// update
function updateData(i) {
  title.value = dataPro[i].title;
  price.value = dataPro[i].price;
  taxes.value = dataPro[i].taxes;
  ads.value = dataPro[i].ads;
  discount.value = dataPro[i].discount;
  getTotal();
  count.style.display = "none";
  category.value = dataPro[i].category;
  submit.innerHTML = "Update";
  mood = "update";
  tmp = i;
}

// search
// clean data

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: #222;
    color: #fff;
}

.crud {
    width: 80%;
    margin: auto;
}

.head {
    display: flex;
    justify-content: space-between;
    text-align: left;
    text-transform: uppercase;
    margin: 10px 0;
}

.head h2 p {
    position: relative;
    top: -10px;
    display: inline-block;
}

.head .ourTeam {
    margin: 5px 0 0 0;
    background-color: #0d1a22;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 10px;
    text-decoration: none;
    color: white;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.head .ourTeam:hover {
    background-color: #264b62cb;
    color: rgb(199, 199, 199);
    box-shadow: 0px 0px 10px rgb(0, 41, 113);
    text-shadow: 5px 5px 5px rgb(255, 255, 255);
}

input {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    background-color: #111;
    margin: 4px 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 4px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

input:focus {
    background-color: #000;
    color: white;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.price input {
    width: 20%;
}

#total {
    background-color: rgb(148, 24, 24);
    padding: 6px 3px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

#total::before {
    content: "total: ";
}

button {
    width: 101%;
    height: 30px;
    border: none;
    cursor: pointer;
    background-color: rgb(3, 11, 50);
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

button:hover {
    background-color: rgb(14, 50, 226);
    letter-spacing: 0.5px;
}
.containerOfcreat{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.creatdiv{
    width: 45%;
}
#submit {
    width: 45%;
    padding: 20px;
    display: block;
    height: 82px;
    font-size: 30px;
    position: relative;
    right: -8px;
}

.btnSearch {
    display: flex;
    justify-content: space-evenly;
}

.btnSearch button {
    width: 45%;
}
#deletAll button{
    margin: 15px 0;
    background-color: rgb(159, 0, 0) ;
    box-shadow: 0 0  5px 5px red;
}

table {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

table th {
    text-transform: uppercase;
}

th,
td {
    padding: 5px;
}

footer {
    width: 100%;
    margin-top: 40px;
    background-color: #0d1a22;
    padding: 30px 0;
}

footer p {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

footer p:hover {
    color: #0d1a22;
    text-shadow: 0px 0px 10px whitesmoke;
}

Wael Aljamal · 22 مايو 2022

بتاريخ 47 دقائق مضت قال Mohammmed Mahmoud:

حسنا اين اقوم بوضعها ال showData() و شكرا .........

في نهاية دوال الإضافة و التعديل.

Wael Aljamal · 21 مايو 2022

مشكلة creat: لديك استدعاء للدالة بعد الشرط الخاص بالتحقق من mode وهو dataPro.push(newPro) وهذا يتم تنفيذه دوماً، حاول حذفه و إعادة التجريب.

مشكلة update: أعتقد أن حل المشكلة السابقة يحل هذه المشكلة،

إن بقي أي مشاكل أرجو التوضيح و الشرح عن مثال.

Mohammed Hhhh · 22 مايو 2022

بتاريخ 4 ساعات قال Wael Aljamal:

مشكلة creat: لديك استدعاء للدالة بعد الشرط الخاص بالتحقق من mode وهو dataPro.push(newPro) وهذا يتم تنفيذه دوماً، حاول حذفه و إعادة التجريب.

مشكلة update: أعتقد أن حل المشكلة السابقة يحل هذه المشكلة،

إن بقي أي مشاكل أرجو التوضيح و الشرح عن مثال.

تم حل المشكله و لكن عندما اقوم ب creat لعنصر يجب علي عمل refresh للصفحه و كذلك عندما اقوم بعمل update ما هو الحل و شكرا

Wael Aljamal · 22 مايو 2022

بتاريخ 9 ساعات قال Mohammmed Mahmoud:

تم حل المشكله و لكن عندما اقوم ب creat لعنصر يجب علي عمل refresh للصفحه و كذلك عندما اقوم بعمل update ما هو الحل و شكرا

يمكنك تفريغ الجدول ثم إعادة عرضه ب show Table لأنه من الصعب حذف سطر محدد منه، وعملية إعادة عرضه بسيطة و سريعة.

Mohammed Hhhh · 22 مايو 2022

بتاريخ 2 ساعات قال Wael Aljamal:

يمكنك تفريغ الجدول ثم إعادة عرضه ب show Table لأنه من الصعب حذف سطر محدد منه، وعملية إعادة عرضه بسيطة و سريعة.

لم افهم

Wael Aljamal · 22 مايو 2022

بتاريخ 5 دقائق مضت قال Mohammmed Mahmoud:

لم افهم

بعد تعديل القيم في Local Storage يمكنك إعادة تحميلهم للصفحة وبذلك تضمن تحديث الجدول. إعادة تطبيق showData()

Mohammed Hhhh · 22 مايو 2022

بتاريخ 17 دقائق مضت قال Wael Aljamal:

بعد تعديل القيم في Local Storage يمكنك إعادة تحميلهم للصفحة وبذلك تضمن تحديث الجدول. إعادة تطبيق showData()

حسنا اين اقوم بوضعها ال showData() و شكرا .........

مشكله في مشروع Front End يتم إضافة البيانات مرتين بالخطأ بدل مرة واحدة في جافاسكربت

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

7 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية