أرجوا المساعدة

<html>
  <head>
    <title>One Million Arab Coders</title>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>
    <script>

    	var button = document.querySelector(".submit");
    	var ul = document.getElementById('list');

        ul.addEventListener('click',function(){

             button.disabled = false;

    	     button.setAttribute('id', 'submit-enabled');  /*id تغيير الـ */

    	});

    </script>


    <div class="container">
      <div class="question">
        <h2>QUIZ QUESTION</h2>
		  	<p>
		  	Which of these is a good variable name?
		  	</p>
      </div>
      <div class="answers">
        <ul id="list">
          <li class="">
            <label for="option1">
              <input type="radio" name="options" value="1" id="option1">
              var firstName
            </label>
          </li>
          <li>
            <label for="option2">
              <input type="radio" name="options" value="2" id="option2">
              var const
            </label>
          </li>
          <li>
            <label for="option3">
              <input type="radio" name="options" value="3" id="option3">
              var 1stName
            </label>
          </li>
          <li>
            <label for="option4">
              <input type="radio" name="options" value="4" id="option4">
              var $first Name
            </label>
          </li>
        </ul>
      </div>
    </div>
    <button class="submit" id="submit-disabled" disabled>submit</button>

    <div id="overlay">
      <div class="modal-content">
        <div id="modal-elements">Thanks for completing that!</div>
      </div>
    </div>

  </body>
  </html>

@Alhakem
أرجوا المساعدة انا متابع ورشتك الخاصة بالجافا سكربت وماشي خطوة بخطوة لكن لا يحدث استجابة عندما اضع علامة على احد الاجوبة مع انني جربت التعليمات نفسها على console الخاص بالمتصفح نجحت العملية ما المشلة أرجوا المساعدة
هذا رسالة الخطأ
Uncaught TypeError: Cannot read property 'addEventListener' of null

مع خالص الشكر :kissing_heart::kissing_heart::hibiscus::hibiscus:::hibiscus::hibiscus:

2 Likes

السلام عليكم ورحمة الله وبركاته أخي الكريم
ضع script قبل نهاية الbody وليس بعد بدايته

3 Likes
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>One Million Arab Coders</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="question">
                <h2>QUIZ QUESTION</h2>
                    <p>
                    Which of these is a good variable name?
                    </p>
            </div>
            <div class="answers">
                <ul id="list">
                <li class="">
                    <label for="option1">
                    <input type="radio" name="options" value="1" id="option1">
                    var firstName
                    </label>
                </li>
                <li>
                    <label for="option2">
                    <input type="radio" name="options" value="2" id="option2">
                    var const
                    </label>
                </li>
                <li>
                    <label for="option3">
                    <input type="radio" name="options" value="3" id="option3">
                    var 1stName
                    </label>
                </li>
                <li>
                    <label for="option4">
                    <input type="radio" name="options" value="4" id="option4">
                    var $first Name
                    </label>
                </li>
                </ul>
            </div>
            </div>
            <button class="submit" id="submit-disabled" disabled>submit</button>

            <div id="overlay">
            <div class="modal-content">
                <div id="modal-elements">Thanks for completing that!</div>
            </div>
        </div>

        <script>

            var button = document.querySelector(".submit");
            var ul = document.getElementById('list');

            ul.addEventListener('click',function(){

                button.disabled = false;

                button.setAttribute('id', 'submit-enabled');  /*id تغيير الـ */

            });

        </script>

    </body>
</html>
4 Likes

كما أشارت lara يعطيها العافية

2 Likes

الله يعافيك أستاذ

2 Likes

شكرا جزيلا اخت لارا
كنت أعتقد انا ذلك ليس له شأن.
:bouquet::bouquet::bouquet::bouquet::bouquet::bouquet::bouquet::bouquet::bouquet:

1 Like

بوركت جهودك استاذ
على تجاوبكم السريع :ok_woman::ok_woman::ok_woman::rose::rose::rose:

1 Like

هل من مشكلة اذا استبدلت

button.setAttribute('id', 'submit-enabled');

ب هذه؟؟

button.id ='submit-enabled';
1 Like

@sohep

فيك بركة أخي
لا مشكلة اطلاقا اذا استبدلت الأولى بالثانية
فالأولى استعملت methode
والثانية اعطيت property id قيمة submit-enabled

2 Likes

شكرا لك

1 Like