إضافة أسماء ديناميكية باستخدام جافا سكريبت

لإنشاء هذا السلوك في صفحة الويب الخاصة بك، يمكنك استخدام الجافا سكريبت. يمكنك بدايةً إنشاء عنصر input لإدخال النص وزر button لتفعيل الإضافة، وعنصر div لعرض الأسماء التي تم إدخالها. هناك طريقتان شائعتان لتحقيق ذلك، وإليك كلاهما:

الطريقة الأولى: استخدام دالة جافا سكريبت مباشرة

في هذه الطريقة، سنستخدم دالة جافا سكريبت onclick مباشرة في الزر لإضافة الأسماء. يمكنك استخدام الكود التالي:

html
html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
head>
<body>
<input type="text" id="nameInput">
<button onclick="addName()">إضافة الإسمbutton>
<div id="namesList">div>

<script>
function addName() {
    // الحصول على قيمة الإسم من حقل الإدخال
    var name = document.getElementById('nameInput').value;
    
    // إنشاء عنصر جديد لعرض الإسم
    var newNameElement = document.createElement('p');
    newNameElement.textContent = name;
    
    // إضافة الإسم إلى قائمة الأسماء
    document.getElementById('namesList').appendChild(newNameElement);
    
    // إفراغ حقل الإدخال لإضافة إسم جديد
    document.getElementById('nameInput').value = '';
}
script>
body>
html>

الطريقة الثانية: استخدام الحدث والاستماع له

في هذه الطريقة، سنستخدم معالج حدث خارجي للزر لإضافة الأسماء. يمكنك استخدام الكود التالي:

html
html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
head>
<body>
<input type="text" id="nameInput">
<button id="addNameButton">إضافة الإسمbutton>
<div id="namesList">div>

<script>
// العثور على زر الإضافة باستخدام الهوية وإضافة معالج حدث له
document.getElementById('addNameButton').addEventListener('click', function() {
    // الحصول على قيمة الإسم من حقل الإدخال
    var name = document.getElementById('nameInput').value;
    
    // إنشاء عنصر جديد لعرض الإسم
    var newNameElement = document.createElement('p');
    newNameElement.textContent = name;
    
    // إضافة الإسم إلى قائمة الأسماء
    document.getElementById('namesList').appendChild(newNameElement);
    
    // إفراغ حقل الإدخال لإضافة إسم جديد
    document.getElementById('nameInput').value = '';
});
script>
body>
html>

هذه الأكواد تسمح للمستخدم بإدخال أسماء في حقل الإدخال وعرضها ديناميكيًا عند النقر على الزر. تأكد من وضع هذا الكود في صفحة HTML وتحديث المتصفح لرؤية التغييرات.

المزيد من المعلومات

بالطبع! يمكنك تحسين هذا الكود بإضافة بعض الخصائص الإضافية مثل التحقق من صحة الإدخال، وإمكانية الضغط على مفتاح Enter لإضافة الإسم، وتنظيم الكود بشكل أفضل. إليك النسخة المحسنة من الكود:

html
html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
<style>
    #namesList {
        margin-top: 10px;
    }
    .name {
        margin-bottom: 5px;
    }
style>
head>
<body>
<input type="text" id="nameInput">
<button id="addNameButton">إضافة الإسمbutton>
<div id="namesList">div>

<script>
// الحصول على عناصر الإدخال والزر وقائمة الأسماء
var nameInput = document.getElementById('nameInput');
var addNameButton = document.getElementById('addNameButton');
var namesList = document.getElementById('namesList');

// إضافة معالج حدث للزر وكذلك للضغط على مفتاح Enter
addNameButton.addEventListener('click', addName);
nameInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addName();
    }
});

function addName() {
    var name = nameInput.value.trim(); // إزالة الفراغات الزائدة من الإدخال
    
    if (name !== '') {
        var newNameElement = document.createElement('p');
        newNameElement.textContent = name;
        newNameElement.classList.add('name'); // إضافة الكلاس للتنسيق
        
        namesList.appendChild(newNameElement);
        nameInput.value = ''; // إفراغ حقل الإدخال
    } else {
        alert('الرجاء إدخال اسم صحيح.'); // إظهار رسالة خطأ عندما يكون الإدخال فارغًا
    }
}
script>
body>
html>

هذا الكود يقوم بإضافة الأسماء إلى قائمة مع تنظيمها بشكل أفضل، كما يتحقق من صحة الإدخال ويعرض رسالة خطأ إذا كان الإدخال فارغًا. يمكنك تخصيص التنسيق بحسب احتياجاتك عن طريق تعديل الأنماط في الجزء الخاص بـ