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

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

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

<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)
}

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

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

میتونی یه کد بنویسی که مثلا هر 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 نمایش بده
قبل اینکه اعداد رو تو هم ضرب کنی و نمایش بدی باید بررسی کنی چیزی که وارد شده عدد هست یا نه. اگه عدد نبود به جای نمایش عدد یه ارور نمایش میدی

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

@asp.gosk

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

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

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

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

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

اگر قرار باشه اسم هر کدومو عوض کنم باید 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>

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

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 معرفی کنی کد ها بیشتر میشن اما خوانایی کد از دست نمیره