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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية