تبلیغات

آموزش لینک دار کردن متن در جاوا اسکریپت

جاوا اسکریپت

ممکن است بخواهید به صورت داینامیک (پویا) و البته در سمت کلاینت، متنی را داخل صفحه‌ی خود لینک دار کنید.

مسئله

برای شروع، کد HTML زیر را در نظر بگیرید:

  • یک input برای وارد کردن لینک دلخواه توسط کاربر و یک دکمه ایجاد کرده‌ایم!
  • یک متن با عنوان FuLLKade در انتهای صفحه و داخل المنت span قرار داده‌ایم!
  • قصد داریم وقتی روی دکمه کلیک شد، متن داخل span لینک‌دار شود.

بنابراین در رویداد onClick مربوط به المنت دکمه، تابعی به نام setLink را با مقادیری فراخوانی می‌کنیم. این تابع را در ادامه پیاده‌سازی خواهیم کرد.

تابع setLink

کد تابع را بصورت زیر پیاده‌سازی کرده‌ایم:

ورودی‌ها:

  • targetId: آیدی المنتی که قصد داریم متن آن را لینک‌دار کنیم.
  • link: خود لینک

توضیح الگوریتم تابع:

  1. المنت هدف را که قرار است محتوای آن را لینک‌دار کنیم، با استفاده از یک آیدی بدست آورده و آن را در متغیری به نام target قرار می‌دهیم.
  2. محتوای فعلی target را داخل متغیری به نام oldHtml قرار می‌دهیم.
  3. لینک را با استفاده از آدرس دریافت شده ایجاد کرده و محتوای فعلی (oldHtml) را نیز داخل آن قرار می‌دهیم. سپس رشته‌ی لینک ایجاد شده را به متغیری به نام newHtml نسبت می‌دهیم.
  4. newHtml ساخته شده را به محتوای target نسبت می‌دهیم.

کد نهایی

تبلیغات
2 نظر
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده 2 دیدگاه

    1. ali گفت:

      با سلام و تشکر بابت مطلب خوبتون

      بنده مارکر و پاپ آپ ی دارم بر روی یک نقشه html
      میخواستم با کدهای اسکریپت، یک از این دو را لینک دارم کنم. یعنی وقتی بر روی مارکر یا پاپ آپ کلیلک میکنیم به یک ادرس وب سایت هدایت شود.
      لطفا بنده را راهنمایی فرمایید.

      1. هادی اکبرزاده گفت:

        سلام. بهتره از کد جاوا اسکریپت برای باز کردن یک لینک استفاده کنید و چیزی رو لینک‌دار نکنید!