onmouseover in JS

Asma'a · 10 ديسمبر 2020

<!DOCTYPE html>
<html>
    <head>
        <style>
            body,html{
                width:100%;
                height:100%;
            }
            #parent
            {
                margin: 50px;
                width: 50%;
                height: 50;
                border: 2px solid rgb(133, 132, 132);
                border-radius: 10%;
                display:flex;
                text-align: center;
            }
            #asc ,#desc
            {
                margin: 50px;
                width: 50%;
                height: 300px;
                border: 2px solid #ddd;
                background-color: #eee;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="asc">
sort
            </div>
            <div id="desc">
                sort
            </div>
        </div>
        <script>
            var cars = [
  {Name:"Asma'a",  specialty:"WEB DEVELOPER"},
  {Name:"Lamia", specialty:"Programming"},
  {Name:"Ayman", specialty:"Hacker"}
];
var x= document.getElementById("parent").innerHTML;
    x.onmouseover=
cars[0].Name + " : " + cars[0].specialty +"\n"
                +
 cars[1].Name + " : " + cars[1].specialty +"\n"
                +
  cars[2].Name + " : " + cars[2].specialty +"\n"
        </script>
    </body>
</html>

أريد طباعة المصفوفة عند تمرير الماوس لكن لايعمل معي!! لماذا

محمد وسيم الحبش · 10 ديسمبر 2020

مرحباً @Asma'a

الكود الخاص بك بحتاج بعض التعديلات ....

أولاً بالنسبة للسطر الذي يقوم بعمل select على العنصر parent , فلا يجب أن نستخدم تابع ال innerHtml لأنه ببساطة بقوم بإرجاع ال Html داخل العنصر :

Capture.PNG.ab226a412d5d3200c24c4f26c19b51d8.PNG

لاحظي كيف أن ال x ترجع Html , فيجب لتحديد عنصر استخدام الكود التالي فقط :

var x= document.getElementById("parent");

ثانياً ommouseover يجب أن تساوي تابعاً وليس قيمة نصية , وضمن هذا التابع يمكننا القيام بأي شيء مثل الطباعة أو غيرها .

على هذا يكون الكود النهائي لطباعة المصفوفة ضمن ال console :

var x = document.getElementById("parent");
    x.onmouseover = function () {
        var content = cars[0].Name + " : " + cars[0].specialty + "\n" +
                	  cars[1].Name + " : " + cars[1].specialty + "\n" +
                	  cars[2].Name + " : " + cars[2].specialty + "\n";
        console.log(content);
	}

تحياتي

Asma'a · 10 ديسمبر 2020

<!DOCTYPE html>
<html>
    <head>
        <style>
            body,html{
                width:100%;
                height:100%;
            }
            #parent
            {
                margin: 50px;
                width: 50%;
                height: 50;
                border: 2px solid rgb(133, 132, 132);
                border-radius: 10%;
                display:flex;
                text-align: center;
            }
            #asc ,#desc
            {
                margin: 50px;
                width: 50%;
                height: 300px;
                border: 2px solid #ddd;
                background-color: #eee;
                text-align: center;
            }
        </style>
    </head>
    <body >
        <div id="parent">
            <div id="asc">
sort
            </div>
            <div id="desc">
                sort
            </div>
        </div>
        <script>
            var cars = [
  {Name:"Asma'a",  specialty:"WEB DEVELOPER"},
  {Name:"Lamia", specialty:"Programming"},
  {Name:"Ayman", specialty:"Hacker"}
];
var x= document.getElementById("parent");

x.onmouseover=function mouse(){
    var content=
cars[0].Name + " : " + cars[0].specialty +"<br>"
                +
 cars[1].Name + " : " + cars[1].specialty +"<br>"
                +
  cars[2].Name + " : " + cars[2].specialty +"<br>";
  document.getElementById("parent").innerHTML=content;
}
  function asc_sort()
  {
      cars.sort(
       function(a,b) 
       {return a.year - b.year}  
      )
  }
  function sort_text() {
    cars.sort(function(n, m){
      var x = n.type.toLowerCase();
      var y = m.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
      return 0;
    })};
    var asc=document.getElementsByTagName("BODY")[0];
    asc.onclick=function()
    {
        asc_sort();
        sort_text();
        var content=
        cars[0].Name + " : " + cars[0].specialty +"<br>"
                        +
         cars[1].Name + " : " + cars[1].specialty +"<br>"
                        +
          cars[2].Name + " : " + cars[2].specialty +"<br>";
          document.getElementById("asc").innerHTML=content;

    }
        </script>
    </body>
</html>

شـــكراً لك..ممكن كمان تشوف لماذا لم يعمل الكود الثاني مع أني طبقت ملاحظاتك

محمد وسيم الحبش · 11 ديسمبر 2020

مرحباً @Asma'a

في الكود عدة أخطاء الصراحة , وهناك أمور مبهمة غير واضحة :

تم تعريف المتحول x مرتين , فهذا قد يحدث خطأً , دعينا نسمي كل متحول باسم مختلف حتى لا يصير تضارب.
في التابع store_text تم المرور على مصفوفة السيارات , واستدعاء التابع toLowerCase على الواصفة التي اسمها type وهي غير موجودة , فأيضاً يعطي خطأ .
أيضاً في التابع asc_sort تم المرور على مصفوفة السيارات والمقارنة بالنسبة للواصفة year والتي هي أيضاً غير موجودة .

برأي أن تتريثي قليلاً , وتبتعدي عن نسخ الحلول ولصقها , بل يجب أن نستخدم الحلول فيما يناسب الكود الخاص بنا .

تحياتي

onmouseover in JS

السؤال

Asma'a

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

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

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

Recommended Posts

محمد وسيم الحبش

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

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

Asma'a

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

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

محمد وسيم الحبش

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية