انجام دستور با جاوا اسکریپت با کلیک کردن روی button در html

آموزش استفاده از رویداد onClick در جاوا اسکریپت

شما اگر میخواید برای یک دکمه یا هر المان دیگه ای توسط جی کوئری و یا جاوا اسکریپت دستوراتی رو بنویسید باید با رویدادها آشنایی داشته باشید. رویداد به معنی حادثه می باشد. به عنوان مثال برخی از Event ها یا رویداد ها رو میتونیم نام ببریم:

• کلیک کردن
• دابل کلیک کردن
• رد شدن ماوس روی یک المان خاص
• تغییر متن یک TextBox

مثال های بالا نمونه هایی از حوادثی هستند که میتوانند برای یک تگ در html پیش بیاید.

خب حالا شما قصد دارید هر موقع روی یک تگ button کلیک می کنید یکسری عملیات انجام بشه. پس شما باید در رویداد کلیک کدهای خودتون رو قرار بدید. به این رویداد در جاوا اسکریپت onClick گفته می شود.

آموزش استفاده از رویداد onClick

ما از چند طریق می توانیم از رویداد ها و کدهای جاوا اسکریپت استفاده کنیم.

روش اول : حالا با یک مثال می بینیم که چجوری میشه از رویداد onClick استفاده کرد.

<button id='btnCalculate'> محاسبه </button>


<script>
     $('#btnCalculate').on(click, funtion(e){
          e.preventDefault();
          alert('Hello');
     })
</script>

در مثال بالا یک id برای تگ button قرار دادیم تا بتونیم در بخش کدهای جاوا اسکریپت از این تگ استفاده کنیم. سپس مشخص کردیم که اگر روی تگ با id = 'btnCalculate' کلیک شده یک پیام را نمایش بده.

روش دوم : اما خب استفاده از دستور Onclick به روشهای ساده تری هم امکان پذیر هست. ولی این روش برای مواقعی مناسب هست که حداکثر شما بخواید یه خط کد رو اجرا کنید یا در حد نمایش یک پیغام باشه. به مثال زیر توجه کنید.

<button onclick='alert('Hello');'>محاسبه</button>

همونطوری که مشاهده می کنید در مثال بالا در همون تگ button دستورات جاوا اسکریپت هم نوشته شد و از رویداد onclick هم استفاده شد.

روش سوم : به یک روش دیگه هم میشه از رویداد onclick استفاده کرد. شما میتونید یک تابع رو تعریف کنید و توسط رویداد onclick اون رو صدا بزنید. به مثال بعدی توجه کنید.

<button onclick="myfunction()"> محاسبه </button>


<script>
     myfunction()
     {
        alert('Hello');
     }
</script>

onclick Event