JavaScript و كيفية تعاملها مع شجرة الDOM

Mari Carmen · 18 نوفمبر 2020

هي كود html ..ممكن مساعده بكود JavaScript:

<!DOCTYPE html>

<html>

<body>

<h1 >Welcome Back</h1>

<hr>

<br>

<p> Hello class </p>

<p> No more Covid19 </p>

<p> Be safe </p>

<p> Best wishes </p>

<h2 >See you soon</h2>



<hr>

<br>



<input type="text" >

<input type="button" value="Insert header">

<br><br>

<input type="color" >

<input type="button" value="Apply to background">

<br><br>

<input type="text" >

<input type="button" value="Insert header">

<br><br>

<input type="button" value="Show paragraphs">

</body>

</html>

Copy and paste the previous code and do the following:

1- When the user writes inside the text box and clicks Insert to header, this will change the header of the page with the written text.

2- When the user selects a color and clicks Apply, the background color of the page should be changed.

3- When the user clicks on a paragraph, this will change the background color of the paragraph to yellow.

4- When the user double clicks on any paragraph, this will hide the paragraph.

5- Clicking on Show all paragraphs, this will show all the paragraphs in the page.

When the user clicks on any paragraph ( the color of the background should be yellow), when the user clicks on another paragraph, only one paragraph should have the background color been set to yellow.

تم التعديل في 18 نوفمبر 2020 بواسطة عبود سمير
وضع الأكواد في مكانها المُخصص

Walid Mohamed2 · 18 نوفمبر 2020

كتبت لك أكواد javascript بطريقة مبسطة .

أكواد html بعد إضافة إستدعاء function عليه :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="b">

<h1 id="h1">Welcome Back</h1>

<hr>

<br>

 

<p id="pra">  Hello class </p>

<p id="pra2"> No more Covid19 </p>

<p id="pra3"> Be safe </p>

<p id="pra4"> Best wishes </p>

<h2 id="pra5">See you soon</h2>

 

<hr>

<br>

 

<input type="text" class="myInput" value="s" id="myInput">

<input type="button" value="Insert header" onclick="getInputValue()">

<br><br>

<input type="color" id="color">

<input type="button" value="Apply to background" onclick="addColor()">

<br><br>

<input type="text" >

<input type="button" value="Insert header">

<br><br>

<input type="button" value="Show paragraphs">

  
</body>
</html>

أكواد javascript :

function getInputValue(){
            // إستدعاء المدخل الذي يتم كتابة في العنزان
            var inputVal = document.getElementById("myInput").value;
            
            // إستدعاء العنوان 
            document.getElementById("h1").innerHTML = inputVal;
            
        }
		//الفانكشن الخاصة بإضافة اللون على الصفحة
        function addColor() {
          	المتغير الخاص بمدخل اللون
            var maiC = document.getElementById("color").value;
          	//الكود الخاص بإضافة كود اللون على تنسيقات الصفحة 
            document.getElementById("b").style.backgroundColor = maiC;
        }
		// هذة أكواد إضافة لون أصفر على خلفية الكلام المكتوب في البراجراف
		//وهذا أستدعاء أول سطر  عند الضغط عليه كليك واحدة
        var ya = document.getElementById("pra");
        ya.onclick = function() { 
          	// يغير اون خلفية العنصر إلى الأصفر
            ya.style.backgroundColor = "yellow";
        }
        var ya2 = document.getElementById("pra2");
        ya2.onclick = function() {
            ya2.style.backgroundColor = "yellow";
        }
        var ya3 = document.getElementById("pra3");
        ya3.onclick = function() {
            ya3.style.backgroundColor = "yellow";
        }
        var ya4 = document.getElementById("pra4");
        ya4.onclick = function() {
            ya4.style.backgroundColor = "yellow";
        }
        var ya5 = document.getElementById("pra5");
        ya5.onclick = function() {
            ya5.style.backgroundColor = "yellow";
        }
		
        /*ondblclick none*/
        /*نفس الفكرة وعند الضغط على كليك مراتين متتاليتين سوف يحذف العنصر */
        ya.ondblclick = function() {
            ya.style.display = "none";
            
        }
        ya2.ondblclick = function() {
            ya2.style.display = "none";
            
        }
        ya3.ondblclick = function() {
            ya3.style.display = "none";
            
        }
        ya4.ondblclick = function() {
            ya4.style.display = "none";
            
        }

سمير عبود · 18 نوفمبر 2020

مرحباً @Mari Carmen

بتاريخ 2 ساعات قال Mari Carmen:

1- When the user writes inside the text box and clicks Insert to header, this will change the header of the page with the written text.

هنا يطلب منك تغيير النص الموجود في الوسم h1 في حالة ملأ حقل الإدخال و الضغط على زر insert header

بتاريخ 2 ساعات قال Mari Carmen:

2- When the user selects a color and clicks Apply, the background color of the page should be changed.

هنا يطلب منك تغيير لون الخلفية للصفحة في حالة تحديد لون و الضغط على زر Apply

بتاريخ 2 ساعات قال Mari Carmen:

3- When the user clicks on a paragraph, this will change the background color of the paragraph to yellow.

إذا ضغط المُستخدم على أي فقرة يتغير لون خلفيتها إلى الأصفر.

بتاريخ 2 ساعات قال Mari Carmen:

4- When the user double clicks on any paragraph, this will hide the paragraph.

إذا ضغط المُستخدم مرتين على اي فقرة يتم إخفاؤها.

بتاريخ 2 ساعات قال Mari Carmen:

5- Clicking on Show all paragraphs, this will show all the paragraphs in the page.

إذا ضغط المُستخدم على زر show all paragraphs يتم إظهار كافة الفقرات في الصفحة.

و هذه الإجابة على كل الأسئلة بالتفصيل:

document.addEventListener("DOMContentLoaded", function() { // الإنتظار لحين تحميل كافة عناصر الصفحة

        let header = document.querySelector('h1'), // أول عنصر يحمل الوسم h1
            allParagraph = document.querySelectorAll("p"), // جلب كافة الفقرات
            colorInput = document.querySelector("input[type=color]");

        /*
            الإجابة على السؤال الأول
            تحديد كافة العناصر input التي تحمل القيمة Insert header و من أجل كل عنصر نضيف مستمع لحدث الضغط
            نجلب حقل الإدخال السابق للزر الذي تم الضغط عليه و نُعاين عدد محارف النص المًدخل إذا كان أكبر من 5 نُغير نص الوسم h1
            و في الأخير نُفرغ الحقل.
         */
        document.querySelectorAll("input[value='Insert header']").forEach(elm => {
            elm.addEventListener('click', function() {
                let headerInput = this.previousElementSibling;
                if (headerInput.value.length > 5) { // إذا كان عدد محارف النص المدخل أكبر من 5
                    header.innerText = headerInput.value; // نقوم بتغيير النص لعنوان الصفحة
                    headerInput.value = ''; // إفراغ حقل الإدخل.
                }
            })
        });

        /*
            الإجابة على السؤال الثاني
            تحديد زر تغيير لون الخلفية
            إضافة مُستمع لحدث الضغط
            تغيير لون الخلفية للون الذي تم تحديده في حقل اللون
         */
        document.querySelector("input[value='Apply to background']").addEventListener('click', function () {// إضافة مُستمع لحدث النقر على زر تغيير لون الخلفية
            document.body.style.backgroundColor = colorInput.value; //تغيير لون الخلفية
        });

        /*
            الإجابة على السؤال الثالث
            عمل حلقة على كل عناصر الفقرة
            من أجل كل فقرة نضيق مُستمع لحدث الضغط
            تغيير لون خلفية الفقرة التي تم الضغط عليها إلى الأصفر
            تغيير لون خلفية الفقرات الأشقاء للون الأبيض
         */
        allParagraph.forEach( p => {
            p.addEventListener('click', function () {
                this.style.backgroundColor = "yellow"; // تغيير لون خلفية الفقرة التي تم الضغط عليها
                // جعل لون خلفية بقية الفقرات أبيض
                allParagraph.forEach(item => {
                    if (item != p)
                        item.style.backgroundColor = "white";
                })
            })
        });

        /*
            الإجابة على السؤال الرابع
            عمل حلقة على كل عناصر الفقرة
            من أجل كل فقرة نضيق مُستمع لحدث الضغط المُزدوج
            إخفاء الفقرة المعنية
         */
        allParagraph.forEach( p => {
            p.addEventListener('dblclick', function () {
                this.style.display = 'none'; // إخفاء الفقرة التي تم الضغط عليها مرتين
            })
        });

        /*
            الإجابة على السؤال الخامس
            تحديد زر إظهار الفقرات
            إضافة مُستمع لحدث الضغط
            عمل حلقة على كل فقرات الصفحة
            إظهار كل فقرة
         */
        document.querySelector("input[value='Show paragraphs']").addEventListener('click', function () {
            allParagraph.forEach( p => {
                p.style.display = 'block';
            })
        });
    });

بإمكانك تجربة الشيفرات من خلال موقع codepen من: هنا

بالتوفيق.

JavaScript و كيفية تعاملها مع شجرة الDOM

السؤال

Mari Carmen

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

Recommended Posts

Walid Mohamed2

سمير عبود

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية