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

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

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

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>

لو قمت بطابعة المتغير 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 من على العناصر 

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

اضغط هنا

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

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