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

عبدالله محمد · 1 أغسطس 2021

مرحبا صممت لعبة بسيطة عند الضغط على احدى الخلايا تظهر رسالة 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

تم التعديل في 1 أغسطس 2021 بواسطة Wael Aljamal
توضيح السؤال وإضافة الشيفرة في الحقل

Salah Eddin Beriani2 · 2 أغسطس 2021

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

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

Wael Aljamal · 1 أغسطس 2021

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

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>

عبدالله أحمد4 · 1 أغسطس 2021

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>

MoJaffer · 2 أغسطس 2021

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

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

اضغط هنا

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

السؤال

عبدالله محمد

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

Recommended Posts

Salah Eddin Beriani2

Wael Aljamal

عبدالله أحمد4

MoJaffer

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية