یک صفحه HTML بسازید که شامل یک فیلد ورودی متن، یک دکمه «اضافه کن» و یک لیست مرتب باشد؛ وقتی کاربر روی دکمه کلیک میکند، مقدار فیلد بهعنوان یک آیتم جدید به لیست اضافه و فیلد ورودی پاک شود و از اضافه شدن آیتمهای خالی جلوگیری شود.
15.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 03:12 0.0
برای حل مسئله از JavaScript و APIهای پایه DOM استفاده کنید: با document.querySelector فیلد ورودی، دکمه و عنصر لیست را انتخاب کنید، برای دکمه یک listener با addEventListener('click') تنظیم کنید، مقدار ورودی را خوانده و اگر غیرخالی بود با document.createElement('li') یک عنصر جدید بسازید و با appendChild به لیست اضافه کنید و سپس input.value = '' را برای پاکسازی مقدار انجام دهید. نکات: قبل از اضافه کردن مقدار را trim() کنید تا فضاهای خالی حذف شوند، میتوانید از textContent یا innerText برای قرار دادن متن در آیتم لیست استفاده کنید و اگر فرم استفاده میکنید event.preventDefault() را فراخوانی کنید تا صفحه رفرش نشود.
توسط پژوهشگر در 198 روز قبل ساعت 03:12 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای جلوگیری از اضافه شدن آیتمهای خالی از input.value.trim() استفاده کنید و قبل از appendChild بررسی کنید که رشته غیرخالی باشد. میتوانید تکراریها را با مقایسه متن آیتم جدید با متنهای موجود در لیست فیلتر کنید و برای UX بهتر بهجای دکمه تنها، جلوگیری از رفرش فرم با event.preventDefault() یا گوشدادن به Enter را در نظر بگیرید. برای دسترسپذیری aria-label مناسب اضافه کنید و بعد از اضافه شدن آیتم focus را دوباره به فیلد بازگردانید.
گزارش