ممکن است بخواهید به صورت داینامیک (پویا) و البته در سمت کلاینت، متنی را داخل صفحه‌ی خود لینک دار کنید.
مسئله
برای شروع، کد HTML زیر را در نظر بگیرید:
|
1 2 3 4 |
<input type="text" id="link" value="http://fullkade.com" /> <br> <input type="button" id="click" value="Change Link" onClick="setLink('address', document.getElementById('link').value);" /> <br> <span id="address">FuLLKade</span> |
- یک input برای وارد کردن لینک دلخواه توسط کاربر و یک دکمه ایجاد کرده‌ایم!
- یک متن با عنوان FuLLKade در انتهای صفحه و داخل المنت span قرار داده‌ایم!
- قصد داریم وقتی روی دکمه کلیک شد، متن داخل span لینک‌دار شود.
بنابراین در رویداد onClick مربوط به المنت دکمه، تابعی به نام setLink را با مقادیری فراخوانی میکنیم. این تابع را در ادامه پیاده‌سازی خواهیم کرد.
تابع setLink
کد تابع را بصورت زیر پیاده‌سازی کرده‌ایم:
|
1 2 3 4 5 6 7 8 |
<script> function setLink(targetId, link) { var target = document.getElementById(targetId); // 1 var oldHtml = target.innerHTML; // 2 var newHtml = "<a href=" + link + ">" + oldHtml + "</a>"; // 3 target.innerHTML = newHtml; // 4 } </script> |
ورودی‌ها:
- targetId: آیدی المنتی که قصد داریم متن آن را لینک‌دار کنیم.
- link: خود لینک
توضیح الگوریتم تابع:
- المنت هدف را که قرار است محتوای آن را لینک‌دار کنیم، با استفاده از یک آیدی بدست آورده و آن را در متغیری به نام target قرار می‌دهیم.
- محتوای فعلی target را داخل متغیری به نام oldHtml قرار می‌دهیم.
- لینک را با استفاده از آدرس دریافت شده ایجاد کرده و محتوای فعلی (oldHtml) را نیز داخل آن قرار می‌دهیم. سپس رشته‌ی لینک ایجاد شده را به متغیری به نام newHtml نسبت می‌دهیم.
- newHtml ساخته شده را به محتوای target نسبت می‌دهیم.
کد نهایی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <title>FullKade.Com</title> </head> <body> <input type="text" id="link" value="http://fullkade.com" /> <br> <input type="button" id="click" value="Change Link" onClick="setLink('address', document.getElementById('link').value);" /> <br> <span id="address"> fullkade </span> <script> function setLink(targetId,link) { var target = document.getElementById(targetId); target.innerHTML = "<a href=" + link + ">" + target.innerHTML + "</a>"; } </script> </body> </html> |
کانال تلگرام فول کده
با سلام و تشکر بابت مطلب خوبتون
بنده مارکر و پاپ آپ ی دارم بر روی یک نقشه html
میخواستم با کدهای اسکریپت، یک از این دو را لینک دارم کنم. یعنی وقتی بر روی مارکر یا پاپ آپ کلیلک میکنیم به یک ادرس وب سایت هدایت شود.
لطفا بنده را راهنمایی فرمایید.
سلام. بهتره از کد جاوا اسکریپت برای باز کردن یک لینک استفاده کنید و چیزی رو لینک‌دار نکنید!