آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جزء برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گرا (OOP یا Object Oriented Programming) کاربرد دارد و مواردی مانند innerHTML را خاصیت (Property) می نامند، با این وجود و به جهت اینکه این موضوع (OOP) در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم، با ادامه مطلب همراه ما باشید.

متد getElementById

از getElementById در جاوا اسکریپت برای تعیین یک مرجع (reference) به یک عنصر (element) با توجه به ID آن استفاده می شود، به زبان ساده یعنی انتخاب یک عنصر HTML (به فرض تگ div) با توجه به ID آن، به طور مثال اگر بخواهیم مقادیر value یک input را با توجه به ID آن استخراج کنیم، خواهیم نوشت:

<input id="test" type="text" value="1">
<script type="text/javascript">
var input = document.getElementById('test').value;
alert(input);
</script>

نکته 1: همان طور که در مثال بالا مشخص است، متد getElementById خود وابسته به شی (object) دیگری به نام document است، لذا الزاما باید به همراه آن استفاده شود.
نکته 2: متد getElementById نسبت به بزرگ یا کوچک بودن مقادیر ID حساس است، به طور مثال Id با id در این متد دو مقدار متفاوت هستند.
نکته 3: در هنگام استفاده از متد getElementById دقت کنید که تگ مورد نظر پیش از فراخوانی، در دسترس قرار گرفته باشد، به عبارت دیگر ابتدا باید تگ مورد نظر توسط مرورگر (و بر اساس ساختار DOM یا نمودار درختی تگ ها از بالاترین قسمت صفحه به پائین) پردازش شود و سپس بتوان عملیاتی روی آن انجام داد، به فرض حالت زیر اشتباه است و خطای TypeError: document.getElementById(...) is null را دریافت خواهید کرد.

<script type="text/javascript">
var input = document.getElementById('test').value;
alert(input);
</script>
<input id="test" type="text" value="1">

علت خطا در مثال بالا این است که پیش از پردازش تگ input مورد نظر، آن را در دستورات جاوا اسکریپت فراخوانی کرده ایم، در صورت نیاز می توانید این مشکل را با استفاده از window.onload (این رویداد زمانی اجرا می شود که صفحه به طور کامل بارگذاری شده باشد) برطرف کنید:

<script type="text/javascript">
window.onload = function(){
    var input = document.getElementById('test').value;
    alert(input);
}
</script>
<input id="test" type="text" value="1">

متد innerHTML

از innerHTML در جاوا اسکریپت برای دریافت یک مقدار از درون تگ های HTML یا اختصاص دادن یک مقدار به تگ ها و تغییر محتوای آنها استفاده می شود، به مثال زیر توجه کنید.

<script type="text/javascript">
function SetValue(id){
    var element = document.getElementById(id);
    //دریافت مقادیر از عنصر مورد نظر
    var value = element.innerHTML;
    alert(value);
}
</script>
<input type="button" onclick="SetValue('result');" value="کلیک کنید">
<div id="result">این یک تست است</div>

همان طور که اشاره شد، کاربرد innerHTML محدود به دریافت یک مقدار نیست و می توان برای اختصاص مقادیر به عناصر HTML از آن استفاده کرد، به مثال زیر توجه کنید.

<script type="text/javascript">
function SetValue(id, value){
    var element = document.getElementById(id);
    //اختصاص مقدار به عنصر مورد نظر
    element.innerHTML = value;
}
</script>
<input type="button" onclick="SetValue('result', 'این یک تست است');" value="کلیک کنید">
<div id="result"></div>

نکته 1: همان طور که ملاحظه می کنید innerHTML وابسته به متد و آبجکت پیش از خود (document و getElementById) است.
نکته 2: استفاده از متد innerHTML برای تغییر محتوای یک عنصر والد (parent) باعث حذف تگ های فرزند (child) آن نیز می شود، به فرض اگر درون تگ div از چند تگ تو در تو استفاده شده باشد، با به کار بردن innerHTML برای تگ والد، محتوای آن هر چه باشد (شامل تگ های div تو در تو) حذف و با مقادیر جدید جایگزین می شود.
نکته 3: برای دریافت مقادیر از تگ input یا تغییر محتوای آن، باید از متد value به جای innerHTML استفاده شود.

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با کاربردهای getElementById و innerHTML در جاوا اسکریپت، چند مثال کاربردی را همراه با پیش نمایش آنلاین در زیر بررسی می کنیم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | کاربرد متد getElementById و innerHTML</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    line-height:20px;
}
#text-box{
    padding:6px;
    background:#CCC;
}
#test-block{
    padding:6px;
    background:#CCF;
    cursor:pointer;    
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!<br>
</noscript>
<input id="test" type="text" value="یک مقدار وارد کنید">
<input type="button" value="کلیک کنید" onclick="AlertValue('test');">
<script type="text/javascript">
function AlertValue(id){
    var value = document.getElementById(id).value;
    alert(value);
}
</script>
<br><br>
آرگومان متد getElementById همان id عنصر HTML مورد نظر است.
<hr><br>
<div id="text-box">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<input type="button" value="تغییر رنگ" onclick="ChangeColor('text-box');">
<input type="button" value="رنگ پیش فرض" onclick="DefaultColor('text-box');">
<script type="text/javascript">
function ChangeColor(id){
    var block = document.getElementById(id);
    block.style.backgroundColor = "#FC0";        
}
function DefaultColor(id){
    var block = document.getElementById(id);
    block.style.backgroundColor = "#CCC";        
}
</script>
<hr><br>
<input id="text-input" type="text" onkeyup="InnerChange(this.id);"><br>
<div id="inner-text"></div>
<script type="text/javascript">
function InnerChange(id){
    var element = document.getElementById(id);
    var value = element.value;
    document.getElementById('inner-text').innerHTML = value;
}
</script>
<br><br>
پس از تایپ عبارت در فیلد بالا، رویداد onkeyup اجرا شده و تابع InnerChange فراخوانی می شود، در این مثال از متد innerHTML استفاده کرده ایم.<br>
نکته: با استفاده از عبارت کلیدی this.id می توانید به صورت خودکار id بلاک یا تگ input مورد نظر را به کدهای خود بدهید.
<hr><br>
<div id="test-block" onclick="GetText(this.id);">این یک متن آزمایشی است!</div>
<script type="text/javascript">
function GetText(id){
    var element = document.getElementById(id);
    var text = element.innerHTML;
    alert(text);
}
</script>
<br><br>
برای دریافت متن داخل بلاک div با استفاده از متد innerHTML، در داخل کادر رنگی بالا کلیک کنید.
</body>
</html>

پیش نمایش

دسته بندی: آموزش مقدماتی » JavaScript

برچسب ها: JavaScript

قبلی »

« بعدی

مطالب بیشتر:
آرایه (Array) در جاوا اسکریپت (JavaScript)
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
رویدادها (Events) در جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
توابع (Functions) در جاوا اسکریپت (JavaScript)

دیدگاه

۱۳۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

پـــرتو

۱۹:۳۵ ۱۴۰۲/۱۲/۰۹

ممنونم از جوابتون ، خب در مورد تلگرام حساب مثلا منکه 6 ماه استفاده نکردم حذف میشه یا اونا حسابشون رو استفاده نکردن و حذف میشن؟ و اگر حساب من اگر بخاطر 6 ماه استفاده نکردن حذف بشه نمی تونم وارد اکانتم بشم درسته؟ متوجه منظورم میشین؟

مدت زمان حذف خودکار حساب به دلیل عدم استفاده بستگی به تنظیماتی دارد که در قسمت Settings > Privacy and Security لحاظ می کنید، بعد از گذشت این مدت و عدم استفاده از حساب کاربری تلگرام، اکانت شما با تمام محتوای آن به صورت غیر قابل بازگشت و غیر قابل دسترسی مجدد حذف شده و نام کاربری شما برای دیگر کاربران Deleted Account نمایش داده می شود!، همچنین امکان ایجاد حساب کاربری جدید با شماره قبلی وجود دارد.

پـــرتو

۱۳:۰۱ ۱۴۰۲/۱۲/۰۵

سلام خوبید؟ ببخشید مزاحم میشم یه سوال کامپیوتری داشتم اونم اینکه این خطای dll یعنی چی و چطوری رفع میشه ؟ بیشتر توی نرم افزارها این خطا میاد و من اموزش رفع این خطا رو نگاه کردم و عین اموزش پیش رفتم ولی بازم رفع نشد ممنون میشم راهنمایی بفرمایید و یه سوال دیگه داشتم نصف مخاطبای تلگرام حساب کاربریشون حذف شده می خواستم ببینم مشکلی بوجود اومده برای تلگرام که همه حذف کاربری کردن یا ایراد از منه؟ ممنون میشم بگید مشکل چیه و تاریخ انلاین بودنشون هم نوشته آخرین بازدید خیلی وقت پیش نمی دونم بلاک شدم یا حذف کردن حساب کاربریشون رو؟؟؟؟؟ ممنون میشم راهنمایی بفرمایید منتظر پاسختون هستم

فرمت dll عموما مربوط به فایل های کتابخانه ای ویندوز است که برای کارکرد برنامه های مختلف به اشتراک گذاشته می شوند، گاهی به دلیل حذف ناقص برنامه ها یا ویروسی شدن سیستم یا حذف اشتباه این فایل ها یا مواردی دیگر مثل ناسازگاری یا ایراد برنامه و... خطاهای dll دریافت می کنید که رفع هر مورد راه حل متفاوتی دارد و به فرض ممکن است برای یک برنامه نیاز به آپدیت Driver گرافیکی باشد یا برای برنامه دیگر نصب مجدد برنامه یا Repair ویندوز مشکل را حل کند و گاهی هم مشکل خیلی مبهم و نامشخص می شود و نیاز به بررسی تخصصی دارد، در هر صورت مشکل مطرح شده راه حل کوتاه و ثابتی ندارد، در مورد تلگرام تا آنجا که اطلاع داریم به صورت پیش فرض اکانت هایی که مدتی از آنها هیچ استفاده نشود توسط تلگرام حذف می شوند، این مدت معمولا یک سال است.

کوروش

۱۹:۵۵ ۱۴۰۲/۰۶/۲۴

سلام
خسته نباشید
توضیح : سایتی که تگ های select option ها و همه div ها و label ها ( کلاس های همنام و آیدی های همنام ) دارند ، آیا می شود با جاوا اسکریپت آیدی یا کلاس خصوصی برای آن تعریف کرد؟
خیلی ممنون میشم ازتون اگر راهی وجود داره با ذکر مثالی بیان کنید.

اگر هدف فقط اختصاص آی دی یا کلاس یکتا به تگ ها صرف نظر از تگ بخصوصی است می توانیم در حلقه این کار را با جاوا اسکریپت انجام دهیم، مثال:

<select>
<option value="salam">select-1</option>
</select>
<select>
<option value="hi">select-2</option>
</select>
<select>
<option value="hello">select-3</option>
</select>
<script>
var loop = 1;
document.querySelectorAll('select').forEach((tag) => {
    tag.id = 'id-' + loop;
	tag.className = 'class-' + loop;
	loop++;
});
alert(document.getElementById('id-2').options[0].value);
</script>

در قسمت

querySelectorAll('select')

به جای select می توانیم نام تگ های دیگر مثل div یا label را قرار دهیم.

محمد

۱۷:۲۷ ۱۴۰۲/۰۲/۲۵

سلام من چطور prompt که از کاربر بگیرم به boolean تبدیل کنم

دقیقا متوجه منظورتان از تبدیل به Boolean نشدیم اما prompt در جاوا اسکریپت در دو صورت false است:
- فیلد خالی باشد و کاربر بر روی دکمه OK کلیک کند.
- کاربر پنجره سوال را ببندد (Cancel کند).
بر این اساس نمونه کد زیر را می توانیم داشته باشیم:

<script>
function myPrompt(){
    var question = prompt('do you have any question?');
    if(question) {
        alert('true : ' + question);
    } else {
        alert('false : ' + question);
    }
}
myPrompt();
</script>

میثم

۱۲:۳۶ ۱۴۰۱/۰۹/۱۵

بسیار سپاسگزار و ممنونم.
واقعا عالی بود.

میثم

۲۳:۰۶ ۱۴۰۱/۰۹/۱۳

ممنونم خیلی عالی بود. کلی محاسبات ریاضی انجام دادم :) اخرش یه شرط دیگه میخواست!
حالا یه سوال:
در حال حاضر بعد از 250 پیکسل ؛ اضافه شدن کلاس به div به اسکرول بالا و پایین حتی در حد یک پیکسل حساس میشه. راهی هست که بشه کاری کرد این حساسیت مثلا برای اسکرول کردن به میزان 50 پیکسل و بیشتر باشه؟

برای کنترل حساسیت با توجه به اینکه مرورگرها رفتار یکسانی برای ایجاد حالت اسکرول ندارند روش یکسانی وجود ندارد اما شاید نمونه کد زیر برای شروع توسعه تابع مناسب باشد:

<script>
var LS = 0;
$(window).scroll(function(event){
    var ST = $(this).scrollTop();
	
	if((ST - LS > 15) || (LS - ST > 15)){
		if(ST > LS && ST > 250){
	    	$('.head').addClass('scro');
		} else {
	    	$('.head').removeClass('scro');
		}
	}
	LS = ST;
});
</script>

هر اسکرول معمولا بین 10 تا 15 پیکسل پیمایش دارد اما اگر کاربر کندتر یا تندتر اسکرول بار را حرکت دهد این مقدار متفاوت می شود که بر این اساس کد بالا اختلاف پیکسل بین نقطه شروع و پایان یک اسکرول را بررسی می کند.

میثم

۲۰:۱۶ ۱۴۰۱/۰۹/۱۲

سلام وقت بخیر.
من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم.

var LS = 0;
$(window).scroll(function(event){
    var ST = $(this).scrollTop();
	if(ST > LS){
	    $('.head').addClass('scro');
	} else {
	    $('.head').removeClass('scro');
	}
	LS = ST;
});

با کد بالا اگه به پایین اسکرول کنیم کلاس به div اضافه میشه و اگه به بالا اسکرول کنیم کلاس از div حذف میشه. حالا قصد دارم که این کد زمانی کار کنه که اندازه اسکرول از بالای صفحه 250 پیکسل و بیشتر باشه و برای زیر 250 پیکسل به صورت ثابت کلاس از div حذف بشه. در واقع این حساسیت کد بالا به اسکرول کردن برای فاصله 250 پیکسل و بیشتر اجرا بشه.
هر چی باهاش ور رفتم نشد. چیکار کنم که درست کار کنه؟ ممنونم.

طبق تست ما اگر قسمت شرطی را به شکل زیر تغییر دهید مشکل رفع می شود:

if(ST > LS && ST > 250){

معین

۱۱:۲۹ ۱۴۰۱/۰۴/۱۹

عالی بود

سید هدایت محمدی

۱۰:۲۲ ۱۴۰۱/۰۳/۰۵

با سلام از مطالب سایتتون و زحمات شما واقعا قدردانی میکنم که این همه وقت گران بهایتان رو برای کمک به این عزیزان میکنید
سوالی داشتم و البته مبتدی هستم تو حوزه جاوا اسکریپت.. من یک کامبو باکسی دارم که از دیتابیس یک سری اطلاعاتی رو می خونه (نام و متن) حالا می خوام وقتی من یکی از این نام ها رو انتخاب کردم به صورت اتوماتیک متن مورد نطر را توی یک تکس آریا نمایش بده ممنون میشم کد جاوا اسکریپت این سوال رو برای من بفرستید با تشکر از سایت خیلی خیلی خوبتون

لطفا یک نمونه از خروجی HTML صفحه مورد نظر یا آدرس URL صفحه ای که باکس در آن قابل تست و بررسی باشد را ارسال کنید تا امکان راهنمایی و نوشتن کد مبتنی بر خروجی موجود میسر باشد، برای ارسال فایل می توانید آن را در سرورتان آپلود کنید یا از طریق ایمیل به آدرس ما (موجود در بخش تماس) ارسال نمائید.

محمد یوسف امیریان

۱۰:۴۴ ۱۴۰۰/۱۲/۰۸

عالی بود و درجه یک

آسیه

۱۲:۴۵ ۱۴۰۰/۰۷/۰۸

سلام ببخشید یه سوال داشتم یه قسمت از سایت دو تا input داره که باید تعداد و نوع مسافر رو وارد کنیم بعد هر دو رو داخل یه div نمایش میده حالا من وقتی input اول رو وارد می کنم درست میده ولی input دوم تعداد رو بهم نمیده و این چطوری کاری کنم که هر دو مقدار با هم چاپ کنه میشه راهنمایی کنید لطفا
کدهام اینا هستند :

<div id="inner-text" class="cd-dropdown-trigger"></div>
<input id="text-input" type="text" onkeyup="InnerChange1(this.id);"><br>
<input id="text-input" type="text" onkeyup="InnerChange2(this.id);"><br>    

function InnerChange1(id) {
    var element = document.getElementById(id);
    var value = element.value;
    document.getElementById('inner-text').innerHTML = value + "بزرگسال";
}

function InnerChange2(id) {
    var element2 = document.getElementById(id);
    var value = element2.value;
    document.getElementById('inner-text').innerHTML = value + "کودک";
}

مشکل از مشترک بودن مقادیر ID برای دو input است، مقدار صفت ID را برای تگ های input به صورت text-input-1 و text-input-2 در نظر بگیرید.

محمود

۰۹:۵۸ ۱۴۰۰/۰۶/۲۱

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

<div id="text-box-1">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<div id="text-box-2">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<div id="text-box-3">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<div id="text-box-4">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<div id="text-box-5">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<div id="text-box-6">پس از کلیک بر روی دکمه تغییر رنگ و اجرای تابع ChangeColor، با استفاده از متد getElementById و style رنگ پس زمینه این بلاک تغییر می کند!</div><br>
<input type="button" value="تغییر رنگ" onclick="moreColor('text-box', 6);">
<script>
function ChangeColor(id){
    var block = document.getElementById(id);
    block.style.backgroundColor = "#FC0";        
}
function moreColor(id, num){
    var block_id;
	for(var i = 1; i <= num; i++){
	    block_id = id + '-' + i;
	    ChangeColor(block_id);
	}
}
</script>

با تشکر.

برای تغییر رنگ چند بلاک با یک کلیک باید تغییراتی در کد داده شود، بلاک ها را با ID های متفاوت به صورت نمونه بالا تغییر دهید، یک تابع هم برای اجرای چند باره تابع تغییر رنگ باید تعریف شود (نمونه کد بالا اصلاح شد).

محمود

۲۳:۱۲ ۱۴۰۰/۰۵/۱۳

سلام و عرض ادب
من این کد را برای آشکار و مخفی شدن باکس جستجو بکار بردم. چگونه میتوانم خاصیت Transition براش ایجاد کنم. یعنی وقتی رو سرچ کلیک میکنم باکس سریع باز می شود ، من می خواهم بصورت آهسته تر از بالا به پایین باز شود. مثلا آشکار و مخفی شدنش 0.3 ثانیه طول بکشد. با تشکر.

<style>
.fade-in {
    animation: fadeIn 0.3s;
    -webkit-animation: fadeIn 0.3s;
    -moz-animation: fadeIn 0.3s;
    -o-animation: fadeIn 0.3s;
    -ms-animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
.fade-out {
    animation: fadeOut 0.3s;
    -webkit-animation: fadeOut 0.3s;
    -moz-animation: fadeOut 0.3s;
    -o-animation: fadeOut 0.3s;
    -ms-animation: fadeOut 0.3s;
}
@keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
</style>
<script>
var time_out;
function showhide(id){
    if(document.getElementById){
        obj = document.getElementById(id);
        if (obj.style.display == "none"){
            obj.style.display = "";
            obj.className = "fade-in";
        } else {
		    obj.className = "fade-out";
			clearTimeout(time_out);
			time_out = setTimeout(() => {
			    obj.style.display = "none";
			}, 300);
        }
    }
}
</script>
<a href="#" onclick="showhide('script'); return(false);"><i class="fa fa-search">Toggle</i></a>
<div style="display: none;" class="nav-search" id="script"> 
<div class="widget widget widget_search" id="search-4">
<div class="widget-content">
<form class="search" method="get" name="searchform" action="http://localhost/asan/">
<input name="s" type="text" placeholder="">
<input class="search-button" type="submit" >
</form>
</div>
</div>
</div>

کد بالا برای نمایش افکت محو و آشکار شدن (Fade in, Fade out) ویرایش شد.

غریب

۰۴:۰۵ ۱۴۰۰/۰۱/۱۱

تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید

غریب

۲۱:۱۹ ۱۴۰۰/۰۱/۱۰

سلام مجدد
ممنون و تشکر از کمکتون
کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم مشکل هم این هست که من کد رو جوری درست کردم که با onmouseover فعال و با onmouseleave غیر فعال میشه تا اینجاش مشکلی نداره اما من میخوام موس وقتی روی خود لینک میره کد فعال بشه و با برگشتنش غیرفعال هرکار کردم ارور داد متاسفانه الان میخوام هر دو رو ایدی بزارم نه کلاس مثال ایدی 1 که لینک هست موس روش بره مقدار یورل گرفته بشه و کد فعال بشه و ایدی 2 تغییرات داخلش اعمال بشه با توجه به کدی که لطف کردید اصلاح کردید من چطور اصلاحش کنم که ارور نده ممنون و شرمنده بابت مزاحمت پی در پی امروزم

می توانیم یک آرگیومنت برای تابع test در نظر گرفته و از رویدادهای onmouseover و onmouseout به شکل نمونه زیر استفاده کنیم:

<style>
#demo2 {
    width: 500px;
	height: 100px;
	border: 1px solid #CCC;
}
</style>
<a id="demo1" title="تست" href="http://example.com/path/to/dir" target="_blank" onmouseover="test(1);" onmouseout="test(0);">تست</a>
<div id="demo2">ماوس را روی لینک بالا ببرید</div>
<script>
//تعریف تابع
function test(status){
    //دریافت آدرس لینک
	var url = document.getElementById("demo1").getAttribute('href');
	
	//حذف اطلاعات موجود در بلاک جهت جلوگیری از نتایج تکراری در کلیک های بعدی
	document.getElementById("demo2").innerHTML = '';
	
	//تعریف تگ جدید برای لینک
    var para = document.createElement("a");
    para.classList.add("mystyle");
    para.setAttribute("style", "position:absolute");
    para.setAttribute("href", url + "/rss");
	para.innerHTML = '<br>' + url + "/rss";
	
	if(status === 1){
	    document.getElementById("demo2").appendChild(para);
	}
}
</script>

تسلط بر جاوا اسکریپت نیاز به طی آموزش های پلکانی از مقدمات دارد در غیر اینصورت در خلق امکانات سفارشی با سردرگمی و مشکل مواجه خواهیم شد، در هر حال طرح سوال با رعایت قوانین بخش ارسال یادداشت هیچ مشکلی ندارد و در حد مقدور پاسخگو خواهیم بود.

صفحه 2 از 9

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.