جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
رایان
2 سال پیش توسط رایان مطرح شد
11 پاسخ

ضرب دو باکس با جاوا اسکریپت

سلام من دوتا تکست باکس دارم که میخوام با هم ضرب بشن و در تکست باکس سوم نمایش داده بشود اما نکته اینجاست که میخوام بدون هیچ دکمه ایی این اتفاق بیافته یعنی عدد تو باکس اول و دوم وارد شد اتومات تو تکست باکس سوم نمایش داده بشه حاصل ضربش


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 2 سال پیش آپدیت شد
1

می تونید از رویداد change روی ورودی ها استفاده کنید، سپس نتیجه رو در بخش سوم نمایش دهید.
https://www.w3schools.com/jsref/eventonchange.asp


نیما
تخصص : جوجه برنامه نویسی که میخواد فو...
@Nima.nori 2 سال پیش آپدیت شد
2

این جوری این کار رو انجام می دین دوست عزیز

<input type="number" id="input1" onchange="sum()" onkeyup="sum()" value="0">
<input type="number" id="input2" onchange="sum()" onkeyup="sum()" value="0">
<div id="output"></div>

و با این کد js

function sum() {
     document.getElementById("output").innerText  = parseInt(document.getElementById("input1").value) * parseInt(document.getElementById("input2").value)
}

با این کد کاربر چه از دو دکمه ی روی صفحه (اونی که یکی اضافه میکنه و اونی که یکی کم می کنه)و چه از کیبورد استفاده کنه اتفاق مد نظرت می افته


محمدرضا
تخصص : &lt;programmer/&gt;
@mrjazini.ir 2 سال پیش مطرح شد
1

میتونی از رویداد ها (events) استفاده کنی
onkeyup مناسبه


ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش آپدیت شد
0

میتونی یه کد بنویسی که مثلا هر 1 ثانیه اجرا بشه و دو عدد رو تو هم ضرب کنه

const num1 = document.getElementById('input1').value;
const num2 = document.getElementById('input2').value;
const outPut = document.getElementById('output');
setInterval(function () {
    outPut.value = num1 * num2;
}, 1000);

فرض کن دو تا اینپوت HTML با آیدی های input1 و input2 داریم ورودیشونو میریزیم تو num1 و num 2. یه textarea یا اینپوت هم داریم با آیدی output که قرار خروجی رو توش نمایش بدیم
اینجا از فانکشن setinterval استفاده کردیم که دو تا ورودی میگیره ورودی اول یه فانکشن که کد هامونو توش قرار میدیم ورودی دوم عددیه که میگه این فانکشن هرچند ثانیه یک بار اجرا بشه(واحدش میلی ثانیه معادل یک هزارم ثانیه هست).
میتونستیم از setTimeout هم استفاده کنیم اما این روش استاندارد تره.
تو فانکشنی که به setInterval دادیم هم گفتیم خروجی رو تو المنت output نمایش بده
قبل اینکه اعداد رو تو هم ضرب کنی و نمایش بدی باید بررسی کنی چیزی که وارد شده عدد هست یا نه. اگه عدد نبود به جای نمایش عدد یه ارور نمایش میدی


محمدرضا
تخصص : &lt;programmer/&gt;
@mrjazini.ir 2 سال پیش مطرح شد
4

این که مدام در حال تکرار باشه بنظرم چیز جالبی نیست

@asp.gosk


رایان
تخصص : junior frontend developer
@rex 2 سال پیش مطرح شد
0

ممنون دوستان پیاده سازیش کردم فقط الان من سه تا باکس دارم که میخوام این عملیات توشون انجام بشه باکس اولی درست انجام میشه باکس دوم و سوم این ارور رو میده :
Uncaught TypeError: Assignment to constant variable.


ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش مطرح شد
0

مشکلت اینکه اسم متغیر هایی که مینویسی یکیه و چون const هست نمیشه تغییر داد و ارور میده


رایان
تخصص : junior frontend developer
@rex 2 سال پیش مطرح شد
0

const رو let کردم ارور نمیده ولی خروجی هم نشون نمیده اره اسم متغیر ها یکیه چون باکس ها شبیه همه و کپی پیست شده الان باید چیکار کنم توی دومی و سومی هم نشون بده ؟


ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش مطرح شد
0

باید اسم هاشون فرق داشته باشه فرقی نداره const باشه یا let(البته این دو تا متفاوت هستن اما تو کاری که تو میکنی مهم نیست از کدوم استفاده میکنی)
نباید اسم هاشون یکی باشن
میتونی مثل کاری که من کردم عمل کنی

input1 -> ورودی اول کاربر
input2 -> ورودی دوم کاربر
output -> خروجی ضرب اعداد

رایان
تخصص : junior frontend developer
@rex 2 سال پیش مطرح شد
0

اگر قرار باشه اسم هر کدومو عوض کنم باید 9 بار اد کنم تو فایل جی اسم ببین من سه تا من سه تا جعبه دارم که هر جعبه سه تا تکست باکس توشه و هر کدوم جدان یعنی این کد پایین سه بار پشت هم نوشته شده :

 <form action="#" class="mat-form">
                        <div class="mat-box">
                            <div class="mat-box-top">
                                <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
                                <a href="#" class="rounded-red"><i class="fa fa-multiply"></i></a>
                            </div>
                            <div class="mat-box-body">
                                <input class="mat-equal" type="text" name="matvalue" id="matvalue" placeholder="0">
                                <div class="rounded-green"><i class="fa fa-equals"></i></div>
                                <input class="mat-price" onchange="sum()" type="text" name="matvalue" id="matvalue"
                                    placeholder="مقدار تومان">
                                <div class="rounded-green"><i class="fa fa-plus"></i></div>
                                <input class="mat-kg" type="text" name="matvalue" id="matvalue" placeholder="KGمقدار">
                                <div class="divide"><span>0%</span></div>
                            </div>
                        </div>
                        <div class="mat-box">
                            <div class="mat-box-top">
                                <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
                                <a href="#" class="rounded-red"><i class="fa fa-multiply"></i></a>
                            </div>
                            <div class="mat-box-body">
                                <input class="mat-equal" type="text" name="matvalue" id="matvalue" placeholder="0">
                                <div class="rounded-green"><i class="fa fa-equals"></i></div>
                                <input class="mat-price" onchange="sum()" type="text" name="matvalue" id="matvalue"
                                    placeholder="مقدار تومان">
                                <div class="rounded-green"><i class="fa fa-plus"></i></div>
                                <input class="mat-kg" type="text" name="matvalue" id="matvalue" placeholder="KGمقدار">
                                <div class="divide"><span>0%</span></div>
                            </div>
                        </div>
                        <div class="mat-box">
                            <div class="mat-box-top">
                                <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
                                <a href="#" class="rounded-red"><i class="fa fa-multiply"></i></a>
                            </div>
                            <div class="mat-box-body">
                                <input class="mat-equal" type="text" name="matvalue" id="matvalue" placeholder="0">
                                <div class="rounded-green"><i class="fa fa-equals"></i></div>
                                <input class="mat-price" onchange="sum()" type="text" name="matvalue" id="matvalue"
                                    placeholder="مقدار تومان">
                                <div class="rounded-green"><i class="fa fa-plus"></i></div>
                                <input class="mat-kg" type="text" name="matvalue" id="matvalue" placeholder="KGمقدار">
                                <div class="divide"><span>0%</span></div>
                            </div>
                        </div>
                    </form>

ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش آپدیت شد
0

یه راهی هست که کد رو کوتاه اما در عین حال پیچیده میکنه
میتونی به همه اینپوت ها آیدی بدی مثلا

input_1
input_2
input_3
...

بعد تو js یه for قرار بدی و یکی یکی این اینپوت ها رو بدست بیاری و بریزی تو یه آرایه

var inputs = [];
for(i = 0; i >= 9; i++){
    inputs[i] == document.getElementById('input_' + i.toString());
}

اون 9 که به for دادم تعداد اینپوت ها هست
الان با این کد میتونیم همه اینپوت ها رو بریزیم تو آرایه inputs اما مشکل زمانی معلوم میشه که میخوایم به یه اینپوت خاص دسترسی داشته باشیم. باید ببینیم اینپوت چندم هست و به شکل index آرایه بهش دسترسی پیدا کنیم و کد خیلی پیچیده میشه
اگه بخوای یکی یکی خودت اینپوت ها رو به Javascript معرفی کنی کد ها بیشتر میشن اما خوانایی کد از دست نمیره


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام