تغيير محتوى عنصر HTML بعد تغيير الخيار في عنصر select

Hanan Fahad2 · 12 يناير 2021

عندي هذي البرنامج اسحب بيانات من API واعرض مافي مشكلة لاكن اضفت select ودخلت البيانات لامشكلة الموضوع لما اختار من القائمه ابغا البيانات تتغير بالي اخترته من القائمه تكون هي الي تتحكم

Api.rar

تم التعديل في 12 يناير 2021 بواسطة Wael Aljamal
توضيح السؤال

أحمد حبنكة · 12 يناير 2021

إذاً تريد حين اختيار عنصر من القائمة أن يتغير العنوان والصورة حسب ما اخترته من القائمة، هل هذا صحيح ؟

إن كان صحيحاً فما تحتاجه هو إضافة onChange كاﻵتي:

function onSelectChange(selectElement){
  document.querySelector('#content h1').innerHTML = window.selectdata[+selectElement.value].name ;
  document.querySelector('#content img').src = window.selectdata[+selectElement.value].img ;
}
async function get(){
  const res = await fetch("https://www.breakingbadapi.com/api/characters/");
    const data = await res.json();
  	window.selectdata = data;
    console.log(data);
    document.querySelector('#content h1').innerHTML = data[0].name ;
    document.querySelector('#content img').src = data[0].img;
    document.querySelector('.select').innerHTML = 
    `
    <select onchange="onSelectChange(this);">
        ${
            data.map(function(act,i){
                return `<option value=${i}> ${act.name} </option>`
            })
        }
    </select>
	`
}
get();

لنشرح ما أضفناه، أولاً أسندنا data إلى window.selectdata وذلك لاستعمالها في تابع onSelectChange ، بعدها وضعنا onchange على select المنشأة، الهدف هو عند تغير قيمة select نختار العنوان والصورة بحسب ما اخترناه.

لذلك نضع value لكل option هو الـindex لهذا الـoption ضمن data، عند اختيار option تكون الـvalue للـselect element تساوي الـvalue للـoption المختار ولذلك استخدمنا selectElement.value في السطرين التاليين:

document.querySelector('#content h1').innerHTML = window.selectdata[+selectElement.value].name ;
document.querySelector('#content img').src = window.selectdata[+selectElement.value].img ;

ماذا عن إشارة الـ+ الغريبة؟ هذه فقط لتحويل القيمة إلى integer.

بالتوفيق وشكراً لك

Hanan Fahad2 · 12 يناير 2021

window.selectdata = data;

window هل فيها عنصر اسمه selectdata او ايش الفكرة مافهمت العنصر هذا

Wael Aljamal · 12 يناير 2021

مرحبا حنان،

نريد تنفيذ function عند تغيير القيمة المختارة عن طريق الاستماع لحدث on change للعنصر select.

قمت بتعريف العنصر select مسبقا و إعطائه id مناسب.

ثم تعريف تابع للاستجابة لحدث التغيير الذي يقرأ البيانات من option التي تحوي دليل العنصر المختار index من خلال قراءة الخاصية value من عنصر select.

<body>
    <div id="content">
        <div id="mySelect" class="select">
            <select id="options" onchange="myFunction()">
            </select>
        </div>
        <h1></h1>
        <img src="" alt=" " width=" 20%">
    </div>
    <script src="scr.js"></script>
    <script>
        function myFunction() {
            let i = document.getElementById("options").value;
            document.querySelector('#content h1').innerHTML = data[i].name;
            document.querySelector('#content img').src = data[i].img;
        }
    </script>
</body>

كما قمت بتعديل الجزء الآخر للشكل التالي:

var data;

async function get() {

    const res = await fetch("https://www.breakingbadapi.com/api/characters/");
    data = await res.json();
    console.log(data);
    let i = 0;
    document.querySelector('#content h1').innerHTML = data[0].name;
    document.querySelector('#content img').src = data[0].img;

    data.map(function (act) {
        let newChild = document.createElement("option");
        if (i == 0) {
            newChild.selected = 'selected';
        }
        newChild.value = i++;
        newChild.text = act.name;
        document.querySelector('#options').appendChild(newChild);
    });
}

get();

قمت بتعريف data بشكل عام لتكون مرئية في جزء script الآخر لسهولة العمل وفهم الفكرة.

و تعريف عداد i يقوم بتخزين نفسه في value للعنصر option لنعرف رقم العنصر الذي اخترناه.

لإضافة العناصر الجديدة للصفحة أي إلى DOM ننشئ العنصر المطلوب و من ثم نضيعه للعنصر الأب المناسب كما في الشيفرة.

باستخدام create Element & append child

الملف بعد التعديل في المرفقات.

بالتوفيق

Api_wael.zip

أحمد حبنكة · 14 يناير 2021

بتاريخ On ١٢‏/١‏/٢٠٢١ at 20:46 قال hanan fahad11:

window.selectdata = data;

window هل فيها عنصر اسمه selectdata او ايش الفكرة مافهمت العنصر هذا

window.selectdata = data ليست إلا طريقة لتعريف global variable فقط لا غير ويمكنك تسمية selectdata بأي شيء تريدين مثلاً window.x أو window.V

Wael Aljamal · 14 يناير 2021

بتاريخ On 1/12/2021 at 20:46 قال hanan fahad11:

window.selectdata = data;

window هل فيها عنصر اسمه selectdata او ايش الفكرة مافهمت العنصر هذا

مرحبا حنان،

يمكنك إعتبار الغرض (window : (Object هو الغرض الرئيسي الذي يعبر عن كل ما هو موجود ضمن نافذة العرض الخاصة بالمتصفح و ما يحويه من بيانات.

للتوضيح يحوي الغرض window على الغرض document الذي يمثل بيانات الصفحة و الذي يمكننا الوصول له بشكل مباشر أو عن طريق الغرض الأب له window

window.document.getElementById("header");

أو 

document.getElementById("header");

و مثلا خاصية معرفة أبعاد صفحة العرض :

window.innerHeight
window.innerWidth

وأيضا دوال التحكم بالنافذة من فتح- إغلاق - نقل - إعادة تعيين الحجم .. :

window.open()
window.close() 
window.moveTo() 
window.resizeTo()

ما يهمنا هنا هو إمكانية التخزين في الذاكرة المحلية لبعض القيم التي نريد مشاركتها بين الشيفرات البرمجية

ويتم ذلك عن طريق Window localStorage Property ومثال بسيط لذلك:

تعريف مفتاح lastname مع إعطائه قيمة Smith وتخزينها محليا إلى حين الحاجة لاسترجاعها..

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

و كما تعلمين في جافا سكربت يمكن إضافة خاصيات بشكل ديناميكي للأغراض من خلال كتابة اسم الغرض ثم نقطة ثم اسم الخاصية (الواصفة) و إعطائها قيمة ..

و مثال لذلك من خلال الغرض localStorage :

حيث قمنا بتعريف clickcount كخاصية من النوع integer لتخزين عدد نقرات مستحدم ما (لا يهم كيف تم برمجة مستقبل الحدث في مثالنا) - من تخزين و جلب القيم لعرض النتيجة في HTML ..

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

ويمكنك تطبيق نفس المنطق كما فعل المدرب أحمد، حيث استعان بالغرض window لتخزين قيمة data محليا.

w3schools : توثيق 1 - توثيق 2

بالتوفيق

تغيير محتوى عنصر HTML بعد تغيير الخيار في عنصر select

السؤال

Hanan Fahad2

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

Recommended Posts

أحمد حبنكة

Hanan Fahad2

Wael Aljamal

أحمد حبنكة

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية