اذهب إلى المحتوى

السؤال

نشر

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

انا اقوم بعمل مشروع 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;
}

 

Recommended Posts

  • 0
نشر

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

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

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

  • 0
نشر
بتاريخ 4 ساعات قال Wael Aljamal:

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

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

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

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

  • 0
نشر
بتاريخ 9 ساعات قال Mohammmed Mahmoud:

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

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...