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


#1
<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

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


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

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


#5

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


#6

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


#7

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


#8

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

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

ب هذه؟؟

button.id ='submit-enabled';

#9

@sohep

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


#10

شكرا لك