penjumlahan otomatis inputan

assalamualaikum saya mau bertanya apabila saya ingin buat penjumlahan otomatis yang inputnya ada: 1.kemasan 200ml, 400ml, 1lt, 2.jumlah beli 3.total harga

nah bagaimana cara nya untuk mendapatkan hasil penjumlahan dari kemasan dan jumlah beli secara otomatis dengan kondisi kemasan = 200ml = rp 3000, 400ml = 6000, 1ltr= 10000. jadi misalnya nanti ketika saya pilih kemasan = 200ml dan memasukan jumlah beli 2, jadi nanti secara otomatis akan menjumlah kan harga dari tiap kemasan yang dipilih dengan jumlah beli

atau apa keywordnya untuk mencari di google? terima kasih

avatar adhide
@adhide

5 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

5 Jawaban:

@adhide pk function onchange javascript. jgn lupa di parseint angkanya

avatar blackarch
@blackarch

101 Kontribusi 35 Poin

Dipost 6 tahun yang lalu

maaf mas belom dong . Kemasan1 Ltr5 Ltr20 Ltr untuk parseintnya di situ apa ?

avatar adhide
@adhide

5 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

@adhide parseint itu fungsinya untuk mengubah format data dari string ke int. di javascript jika tidak menggunakan parse maka bisa dibilang tidak diketahui type data yang di ambil/peroleh, karena perintahnya hanyalah mengambil nilai/value contoh :

E.g:
var a = document.getElementById("a").value; // 1
var b = document.getElementsByName("b")[0].value;  // 2
var c = a+b;
alert(c);

Result : 12 Jika tidak di declare maka akan dianggap sebagai string sama dengan var c = "text" + "text"; , maka dari itu jika di declare

var a = document.getElementById("a").value; // 1
var b = document.getElementsByName("b")[0].value;  // 2
var c = parseInt(a) + parseInt(b);
alert(c);
// result = 3

avatar blackarch
@blackarch

101 Kontribusi 35 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

@adhide kalo pk onkeyup untuk select krng effect dhe, tp kl mau dicoba aja, untuk case kamu seperti ini :

<html>
	<head></head>
	<body>
		<select id="kemasan" onchange="math()">
			<option value="0" selected="selected">None</option>
			<option value="1">1 Ltr</option>
			<option value="5">5 Ltr</option>
			<option value="20">20 Ltr</option>
		</select>
		<input type="text" id="number" onchange="math()">
		<p id="msg"></p>
	</body>
</html>

<script type="text/javascript">
function math() {
	var a = parseInt(document.getElementById("kemasan").value);
	var b = parseInt(document.getElementById("number").value);
	if(a && b)
		document.getElementById("msg").innerHTML= a+b;
}
</script>

//Tambahan jika kamu mau di lock keywordnya(0-9), biar tidak terjadi black box bisa pk ini :

//html
<input type="text" id="number" onchange="math()" onKeyPress="return goodchars(event,'12345677890',this)">
//js letakan code ini di head
<script type="text/javascript">
function getkey(e)
{
	if (window.event)
		return window.event.keyCode;
	else if (e)
		return e.which; else return null;
}
function goodchars(e, goods, field)
{
	var key, keychar; key = getkey(e);
	if (key == null) return true;
		keychar = String.fromCharCode(key);
		keychar = keychar.toLowerCase();
		goods = goods.toLowerCase();
	// check goodkeys
	if (goods.indexOf(keychar) != -1)
		return true;
	// control keys
	if ( key==null || key==0 || key==8 || key==9 || key==27 )
		return true;
	if (key == 13)
	{
		var i;
		for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
	break;
		i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
	}; // else return false
	return false;
}
</script>

Untuk test online https://jsfiddle.net/ddc5jc2p/

avatar blackarch
@blackarch

101 Kontribusi 35 Poin

Dipost 6 tahun yang lalu

terima kasih banyak mas yah rinci sekali jawabannya dicoba lagi yak hehehe

avatar adhide
@adhide

5 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban