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

خطأ في شيفرة جافاسكربت لعرض إخطاء alert حسب قيمة شرط معينة

عبدالله محمد

السؤال

مرحبا صممت لعبة بسيطة عند الضغط على احدى الخلايا تظهر رسالة alert  تظهر رقما عشوائيا 

وهنا وضعت شرت اذا ضغط على احدى الخلايا وكان الناتج اكبر من او يساوي 8 تظهر رسالة انت فزت وان كان اقل تظهر انت خسرت المشكلة انه حتى عندما يكون الناتج اكبر من او يساةي 8 تظهر رسالة انت خاسر اتمنى الاجابة على سؤالي اين الخطأ في شيفرة الجافا سكربت وشكراً جزيلاً

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .container{
            background-color: rgb(148, 148, 148);
        }

        .col{
            background-color: coral;
            border-bottom: 10px solid rgb(148, 148, 148);
            border-left: 5px solid rgb(148, 148, 148);

        }

        .col:hover{
            background-color: white;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
      <div class="col" onclick="ik()">
        Column
      </div>
      <div class="col" onclick="ik()">
        Column
      </div>
      <div class="col" onclick="ik()">
        Column
      </div>   
      <div class="col" onclick="ik()">
        Column
      </div>
    </div>

    <div class="row">
        <div class="col" onclick="ik()">
          Column
        </div>
        <div class="col" onclick="ik()">
          Column
        </div>
        <div class="col" onclick="ik()">
          Column
        </div>   
        <div class="col" onclick="ik()">
          Column
        </div>
      </div> 
  
  </div>

    <!--ranking the line code very Important here ... this ranking Important-->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
        function ik(){
            var y = document.getElementsByClassName("col");
            var t = alert("this is column"  +  "="  +   Math.round(Math.random() * 10));

            if(y >= 8){
             alert("YOU WON");
            }
    
        else{
            alert("YOU LOST");
          }
        }
    </script>
</body>
</html>

هذا هو الملف index.html

تم التعديل في بواسطة Wael Aljamal
توضيح السؤال وإضافة الشيفرة في الحقل
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

سأعطيك بعض الملاحظات:

  • y هي عبارة عن مصفوفة تحوي جميع العناصر التي لها class يساوي col أي جميع الأسطر لديك للوصول لسطر محدد استخدم محدد المصفوفة [ i ]  أي هكذا 
    document.getElementsByClassName("col")[0]

    أي  للوصول للعنصر الذي تم النقر عليه يجب تمرير المعرف ضمن الدالة ()ik عند الاستدعاء

    <div class="col" onclick="ik(0)">
    
      ..
    
    </div>
    
    <script>
      function ik(id) {
        let element = document.getElementsByClassName("col")[id]
        }
    </script>

     

  • الشرط غير محقق لأنك لا تقارن قيمة عددية مع الرقم 8
  • حسب الفكرة في الصفحة لا تحتاج y 
  • لايمكن تخزين العنصر alert في متغير فهو undefined
  • علينا تخزين القيمة التي يولدها التابع العشوائي في متغير ثم نستعمله نفسه في alert ثم اختبار الشرط
    <script>
      function ik() {
        // var y = document.getElementsByClassName("col");

        var t = Math.round(Math.random() * 10)
        alert('this is column' + '=' + t)

        if (t >= 8) {
          alert('YOU WON')
        } else {
          alert('YOU LOST')
        }
      }
    </script>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

document.getElementsByClassName("col") تقوم بإرجاع HTMLCollection وهي أشبه بالمصفوفة عند التعامل معها فمثلا لجلب أول عنصر يحتوي على الكلاس .col فنقول في الكود 

document.getElementsByClassName("col")[0]

لاحظ ال [0] في النهاية (لأن المصفوفة تبدأ من 0)
الآن نحن نريد أن نجلب العنصر الذي تم الضغط عليه لذلك سنعدل في كود ال HTML ليتم اضافة ال index الخاص بكل عنصر، وسنعدل في كود الجافاسكربت لكي نستطيع جلب ال index ايضاً كالتالي:
 

<div class="container">
    <div class="row">
      <div class="col" onclick="ik(0)">
        Column
      </div>
      <div class="col" onclick="ik(1)">
        Column
      </div>
      <div class="col" onclick="ik(2)">
        Column
      </div>   
      <div class="col" onclick="ik(3)">
        Column
      </div>
    </div>

    <div class="row">
        <div class="col" onclick="ik(4)">
          Column
        </div>
        <div class="col" onclick="ik(5)">
          Column
        </div>
        <div class="col" onclick="ik(6)">
          Column
        </div>   
        <div class="col" onclick="ik(7)">
          Column
        </div>
      </div> 
  
  </div>

<script>
        function ik(index){
            var y = document.getElementsByClassName("col")[index];
            var t = alert("this is column"  +  "="  +   Math.round(Math.random() * 10));

            if(y >= 8){
             alert("YOU WON");
            }
    
        else{
            alert("YOU LOST");
          }
        }
</script>

الآن تبقى شئ أخير وهو المقارنة بأن الرقم العشوائي أكبر من أو يساوي 8، لعمل ذلك علينا حفظ الرقم العشوائي في متغير والمقارنة هل هو أكبر من أو يساوي 8 كالآتي:

<script>
        function ik(index){
            var y = document.getElementsByClassName("col")[index];
         	var randomNumber = Math.round(Math.random() * 10))
            var t = alert("this is column"  +  "="  +   randomNumber;

            if(randomNumber >= 8){
             alert("YOU WON");
            }
    
        else{
            alert("YOU LOST");
          }
        }
</script>

نلاحظ هنا بعد التعديل في الكود أنه لا حاجة إلى المتغير الذي يسمى y أصلاً لذلك يمكننا حذفه ويصبح كود الجافاسكربت النهائي:

<script>
        function ik(index){
         	var randomNumber = Math.round(Math.random() * 10))
            var t = alert("this is column"  +  "="  +   randomNumber;

            if(randomNumber >= 8){
             alert("YOU WON");
            }
    
        else{
            alert("YOU LOST");
          }
        }
</script>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لو قمت بطابعة المتغير y عن طريق console.log سترى بأن نتيجة المتغيير هي عبارة عن مصفوفة ستكون بهذا الشكل 

[div.col, div.col, div.col, ...]

وطبعاً هنا أخي عندما قمت بإستخدام الشرط if للتحقق من قيمة المتغير y فمن المستحيل أن يتحقق الشرط "وهو أن تكون القيمة اكبر من أو يساوي ثمانية"

وهنا الحل بسيط جدا أخي 

أنت في الإساس لست بحاجة بالتحقق من قيمة المتغيير y 

وفي الإساس ليس هناك حاجة في انشاء هذا المتغيير إذا انه يمكنك التحقق من قيمة المتغيير t الذي قمت بإنشائه بدلا من ذلك كما في التالي : 

function ik() {
  var t =  Math.round(Math.random() * 10);
  alert("this is column: " + t)
  if (t >= 8) {
    alert("YOU WON");
  } else {
    alert("YOU LOST");
  }
}

للإضافة : 

don't repeat yourself

هناك طريقة اكثر احترافية لكتابة الكود الخاص بك 

فبدلاً من تكرار كتابة  onclick في كل عنصر من عناصر (div) تستطيع بدلاً من ذلك استعمال الدالة addEventListener عند الضغط على اي عنصر يحوي كلاس بإسم (col) 

سنعود هنا لإستخدم document.getElementsByClassName كما استخدمتها في الكود  الخاص بك

وكما تذكر فإن هذا سيعود لنا بمصفوفة عن طريقها سنستطيع عمل عملية تكرار بسيطة بإستخدام for 

ومن ثم استخدام addEventListener للإستماع للحدث عند الضغط على أي عنصر لديه كلاس (col)

سيمنحك هذا كود نظيف ولن تحتاج لتكرار كتابة onclick عند كل عنصر 

كما في التالي :  

    var elements = document.getElementsByClassName("col");
    var ik = function(){
      var randomNum = Math.round(Math.random() * 10);
      alert("this is column" + "=" + randomNum);
      console.log('Number is:', randomNum);
      if (randomNum >= 8) {
        alert("YOU WON");
      } else {
        alert("YOU LOST");
      }
    }
    
    for(var i = 0; i < elements.length; i++){
      elements[i].addEventListener('click', ik)
    }
    

لا تنسى حذف onclick من على العناصر 

في الرابط التالي ستجد الكود بشكل كامل : 

اضغط هنا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

أنت لا تقارن نسبيا للرقم الذي يتم انتاجه في كل مرة على العموم لقد قمت بتحديث لعبتك قليلا  لتصبح تعمل بالشكل التالي 

Animation1.thumb.gif.771f9c831b32ca953f681d3fd465f486.gif

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <style>
      .container {
        background-color: rgb(148, 148, 148);
        margin-top: 10%;
      }

      .col {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        background-color: coral;
        border-bottom: 10px solid rgb(148, 148, 148);
        border-left: 5px solid rgb(148, 148, 148);
        height: 200px;
      }

      .col:hover {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>

      <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>

    <!--ranking the line code very Important here ... this ranking Important-->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script>
      document.addEventListener('click', function (e) {
        const num = Math.round(Math.random() * 10);
        console.log(e);
        console.log(num);
        if (num >= 8) {
          e.target.style.backgroundColor = 'green';
          e.target.textContent = 'YOU WON :' + num;
        } else {
          e.target.style.backgroundColor = 'red';
          e.target.textContent = 'YOU LOST :' + num;
        }
      });
    </script>
  </body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...