تغيير لون خلفية عنصر html باستخدام جافاسكربت

Mohammed Hhhh · 21 مايو 2022

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

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

المشكله موجوده في مربع ال total

حاولت ان اجعل مربع ال total ان يصبح لونه اخضر عند ادخال البينات و لونه احمر عندما لا تتوفر بينات و لكن عندما اقوم بمسح البيانات لا يستجيب و يبقى لونه

اخضر و لا يتغير الى الاحمر لانه من المفترض ان تيغير الى اللون الاحمر لانه لا يجود قيم في المربعات pricr , taxes , ads , discount

سوف اضع comment لاوضح اين المكشله في ملف JS

كود html

<!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>

        <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>
                <tr>
                    <td>5409</td>
                    <td>i phone</td>
                    <td>4000</td>
                    <td>210</td>
                    <td>324</td>
                    <td>20</td>
                    <td>10</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>0952</td>
                    <td>Lenovo</td>
                    <td>3256</td>
                    <td>10</td>
                    <td>32</td>
                    <td>5</td>
                    <td>19</td>
                    <td>laptop</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>4285</td>
                    <td>Samsung</td>
                    <td>4500</td>
                    <td>20</td>
                    <td>100</td>
                    <td>100</td>
                    <td>30</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
                <tr>
                    <td>4285</td>
                    <td>Samsung</td>
                    <td>4500</td>
                    <td>20</td>
                    <td>100</td>
                    <td>100</td>
                    <td>30</td>
                    <td>phone</td>
                    <td><button id="update">update</button></td>
                    <td><button id="delet">delet</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <footer>
        <p>Proudly made by Mohammed  😁</p>


    </footer>


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

</html>

كود css

* {
    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%;
}

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;
}

كود JS

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);
// count total
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
function getTotal() {
    if(price != ""){
        let result = (+price.value + +ads.value + +taxes.value) - 
        +discount.value; 
        total.innerHTML = result ;
        total.style.background="#040" ;
    }else{
        total.innerHTML='' ;
        total.style.background = '#040';
    }
}

//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem
//!!!!!!! proplem

وشكرا لكم ................

محمد أبو عواد · 21 مايو 2022

السبب أنك تقارن العنصر price ولا تقارن قيمته, لاحظ

 if(price != ""){
    ^^^^^

price تعبر عن العنصر الذي لديه المعرف price, لاحظ

let price = document.getElementById("price");

ولكن نحن نريد أن نقارن قيمة الحقل ويمكننا الحصول عليها من خلال التابع value كالتالي

if(price.value != ""){
       ^^^^^^^

تغيير لون خلفية عنصر html باستخدام جافاسكربت

السؤال

Mohammed Hhhh

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

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

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية