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

دوستان چجوری میشه با کلیک کردن روی یک دکمه که در html ساختم یک سری عملیات رو در جاوا اسکریپت یا جی کویری انجام داد ؟

<button class='btn btn-success col-md-3 col-xs-6'>
    محاسبه و نمایش
</button>

ویرایش شده در جمعه 22 اردیبهشت 1402 ساعت 11:58:42

مشخصات سوال کننده :

کاربر : pedram_khan امتیاز کاربر : 277 رتبه کاربر : 6

دسته بندی : Html جاوا اسکریپت جی کوئری

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 9349

1 نظر

AMIRrvi : ببین داداش این سادشه هرچی تو اینپپوته بنویسی بعد اگه دکمه هرو بزنی ضرب در دو میشه <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="number" id="number"> <button onclick="a()">صرب در 2 کردن</button> <script> function a(){ var b=document.getElementById("number").value; var c=b*2; document.getElementById("number").value=c; } </script> </body> </html>

امتیاز کاربر : 0 رتبه کاربر : 7020 تاریخ ثبت : 01:26 1402/02/22

حذف

پاسخ دهنده : saedbfd 03:15 1399/07/25

آموزش استفاده از رویداد 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

ویرایش شده در جمعه 25 مهر 1399 ساعت 03:15:55

به این پاسخ امتیاز بدهید 0

امتیاز: 1654 رتبه: 1

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود