كود الجاف سكريبت

Reem Abu Alhasan · 3 فبراير 2023

كود الجافا سكريبت لا يعمل ولا يوجد له خطأ

عبدالباسط ابراهيم · 3 فبراير 2023

الكود ليس به أي خطأ ولكن لا ينفذ أي شئ نتيجة أنك لم تقم باستدعاء هذه الدوال لذلك حاول القيام باستدعاء أي من هذه الدوال عن طريق إضافة ()openNav مثلاً سيقوم الكود بفتح ال nav كما في الكود وهذا كتجربة لتتأكد من أن الكود يعمل ولكن بعدها يمكنك تعديله ليناسب طريقة عمل موقعك

أو إذا كان هناك زر في ملف ال html عند الضغط عليه ينفذ أحد هذه الدوال فيجب التأكد من ذلك

Reem Abu Alhasan · 4 فبراير 2023

بتاريخ On ٣‏/٢‏/٢٠٢٣ at 11:50 قال عبدالباسط ابراهيم:

الكود ليس به أي خطأ ولكن لا ينفذ أي شئ نتيجة أنك لم تقم باستدعاء هذه الدوال لذلك حاول القيام باستدعاء أي من هذه الدوال عن طريق إضافة ()openNav مثلاً سيقوم الكود بفتح ال nav كما في الكود وهذا كتجربة لتتأكد من أن الكود يعمل ولكن بعدها يمكنك تعديله ليناسب طريقة عمل موقعك

أو إذا كان هناك زر في ملف ال html عند الضغط عليه ينفذ أحد هذه الدوال فيجب التأكد من ذلك

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

body {
font-family : "lato",sans-serif;
}
.sidenav {
height : 100 %;
width : 0 ;
position : fixed;
z-index : 1;
top : 0 ;
left : 0;
background-color : #ffdlla;
overflow-x : hidden;
transition : 0.5s ;
padding-top : 60px ;
}
.sidenav a{
padding : 8px 8px 8px 32px ;
text-decoration : none ;
font-size : 25px ;
color : white ;
display : block ;
transition : 0.3s ;
}
.sidenav a :havor {
color : black ;
}
.sidenav .closebtn {
position : absolute ;
top : 0 ;
right : 25px ;
font-size : 36px ;
margin-left: 50px ;
}
#main {
transition : margin-left .5s ;
padding : 16px ;
}
span {
font-size : 30 ;
cursor : pointer ;
}
</style>
<script type="javascript/text">
Function openNav(){
document.getElementById("mysidenav").style.width="250px";
document.getElementById("main").style.width="250px";
}
Function closeNav(){
document.getElementById("mysidenav").style.width="0px";
document.getElementById("main").style.width="0px";
}
</script>
</head>
<body>
<div id="mysidenav" class="sidenav">
<a href="#" class="closebtn" onclik= "closeNav()">×</a>
<a href="#"> Members </a>
<a href="#"> Custmer </a>
<a href="#"> About </a>
<a href="#"> Contact </a>
</div>
<div id="main">
<span onclik="openNav()"> ☰</span>
</div>
</body>
</html>

أحمد رضا5 · 6 فبراير 2023

يوجد بعض المشاكل البسيطة في الكود وهي ما تمنع عملة

اولها هو خطأ كتابي في

onclik="closeNav()"
// right way
onclick="closeNav()"

الخطأ الثاني

  <script type="javascript/text">

نوع الملف خاطئ والصحيح هو application/javascript ولكن انتي لست بحاجة الي اضافة type فهذا هو القيمة الإفتراضية

الخطأ الثالث هو الحرف الأول من كلمة function يجب ان يكون small

    <script type="javascript/text">
      Function openNav(){
                document.getElementById("mysidenav").style.width="250px";
                document.getElementById("main").style.width="250px";
            }
      Function closeNav(){
                document.getElementById("mysidenav").style.width="0px";
                document.getElementById("main").style.width="0px";
          }
    </script>
    <!-- the right way -->
    <script type="application/javascript">
      function openNav() {
        document.getElementById("mysidenav").style.width = "250px";
        document.getElementById("main").style.width = "250px";
      }
      function closeNav() {
        document.getElementById("mysidenav").style.width = "0px";
        document.getElementById("main").style.width = "0px";
      }
    </script>

من المفترض ان كود الجافا سكريبت يعمل الآن

ولكن هناك بعض المشاكل في ال css يجب حلها

      .sidenav {
        /* height: 100 %;   */
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        /* background-color: #ffdlla; */
        background-color: #ffd11a;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }

والآن الكود يعمل بدون أي مشاكل

كود الجاف سكريبت

السؤال

Reem Abu Alhasan

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

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

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

Recommended Posts

عبدالباسط ابراهيم

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

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

Reem Abu Alhasan

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

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

أحمد رضا5

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية