Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Menangani Form dalam Javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<script type="text/javascript">
//bagaimana caranya agar user ketika mengklik pizza 1 nilai harga yang ada didalamnya
//tampil di price paling bawah dan mengurangi jika mengklik size dan bertambah harganya jika mengklik topping ?
</script>
<!--Header-->
<div class="header">
<h1>Pizza</h1>
</div>
<!--Pizza-->
<main>
<div id="menu1">
<div id="img1">
<img src="img/pizza-1.png" width="200" height="200">
</div>
<p>Pizza 1</p>
<p >$ 8</p>
<input type="radio" name="radio1" value="8" id="radio1">
</div>
<div id="menu2">
<div id="img2">
<img src="img/pizza-2.png" width="200" height="200">
</div>
<p>Pizza 2</p>
<p >$ 10</p>
<input type="radio" name="radio1" value="10" id="radio1">
</div>
<div id="menu3">
<div id="img3">
<img src="img/pizza-3.png" width="200" height="200">
</div>
<p>Pizza 3</p>
<p >$ 12</p>
<input type="radio" name="radio1" value="12" id="radio1">
</div>
</main>
<!--Size Small-->
<h1>Size</h1>
<div class="small">
<input type="radio" value="1">
<p>Small</p>
</div>
<!--Size Medium-->
<div class="medium">
<input type="radio" checked="checked" value="0">
<p>Medium</p>
</div>
<!--Size Large-->
<div class="large">
<input type="radio" value="0">
<p>Large</p>
</div>
<!--Toppings-->
<h1>Toppings</h1>
<div class="toppings1">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="1"> Avocado</li>
<li><input type="checkbox" class="cek" name="cek" value="1"> Broccoli</li>
<li><input type="checkbox" class="cek" name="cek" value="1"> Onions</li>
<li><input type="checkbox" class="cek" name="cek" value="1"> Zucchini</li>
</ul>
</div>
<div class="toppings2">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="2"> Lobster</li>
<li><input type="checkbox" class="cek" name="cek" value="2"> Oyster</li>
<li><input type="checkbox" class="cek" name="cek" value="2"> Salmon</li>
<li><input type="checkbox" class="cek" name="cek" value="2"> Tuna</li>
</ul>
</div>
<div class="toppings3">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="3"> Bacon</li>
<li><input type="checkbox" class="cek" name="cek" value="3"> Duck</li>
<li><input type="checkbox" class="cek" name="cek" value="3"> Ham</li>
<li><input type="checkbox" class="cek" name="cek" value="3"> Sausage</li>
</ul>
</div>
<!--Price-->
<div class="Price">
<h1>Price</h1>
$<span id="total"></span>
</div>
</body>
</html>
0
3 Jawaban:
Jawaban Terpilih
kurang lebih kayak gitu, trus untuk value yang disize saya hapus checkednya, soalnya kalau ada dia gk berefek keprice
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<script type="text/javascript">
//bagaimana caranya agar user ketika mengklik pizza 1 nilai harga yang ada didalamnya
//tampil di price paling bawah dan mengurangi jika mengklik size dan bertambah harganya jika mengklik topping ?
</script>
<!--Header-->
<div class="header">
<h1>Pizza</h1>
</div>
<!--Pizza-->
<main>
<div id="menu1">
<div id="img1">
<img src="img/pizza-1.png" width="200" height="200">
</div>
<p>Pizza 1</p>
<p >$ 8</p>
<input type="radio" name="radio1" value="8" class="radio1" onclick="pizza1(8)">
</div>
<div id="menu2">
<div id="img2">
<img src="img/pizza-2.png" width="200" height="200">
</div>
<p>Pizza 2</p>
<p >$ 10</p>
<input type="radio" name="radio1" value="10" class="radio1" onclick="pizza1(10)">
</div>
<div id="menu3">
<div id="img3">
<img src="img/pizza-3.png" width="200" height="200">
</div>
<p>Pizza 3</p>
<p >$ 12</p>
<input type="radio" name="radio1" value="12" class="radio1" onclick="pizza1(12)">
</div>
</main>
<!--Size Small-->
<h1>Size</h1>
<div class="small">
<input type="radio" value="1" onclick="Size(1)">
<p>Small</p>
</div>
<!--Size Medium-->
<div class="medium">
<input type="radio" value="0" onclick="Size(2)">
<p>Medium</p>
</div>
<!--Size Large-->
<div class="large">
<input type="radio" value="0" onclick="Size(3)">
<p>Large</p>
</div>
<!--Toppings-->
<h1>Toppings</h1>
<div class="toppings1">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="1" onclick="topping(1)"> Avocado</li>
<li><input type="checkbox" class="cek" name="cek" value="1" onclick="topping(1)"> Broccoli</li>
<li><input type="checkbox" class="cek" name="cek" value="1" onclick="topping(1)"> Onions</li>
<li><input type="checkbox" class="cek" name="cek" value="1" onclick="topping(1)"> Zucchini</li>
</ul>
</div>
<div class="toppings2">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="2" onclick="topping(2)"> Lobster</li>
<li><input type="checkbox" class="cek" name="cek" value="2" onclick="topping(2)"> Oyster</li>
<li><input type="checkbox" class="cek" name="cek" value="2" onclick="topping(2)"> Salmon</li>
<li><input type="checkbox" class="cek" name="cek" value="2" onclick="topping(2)"> Tuna</li>
</ul>
</div>
<div class="toppings3">
<ul>
<li><input type="checkbox" class="cek" name="cek" value="3" onclick="topping(3)"> Bacon</li>
<li><input type="checkbox" class="cek" name="cek" value="3" onclick="topping(3)"> Duck</li>
<li><input type="checkbox" class="cek" name="cek" value="3" onclick="topping(3)"> Ham</li>
<li><input type="checkbox" class="cek" name="cek" value="3" onclick="topping(3)"> Sausage</li>
</ul>
</div>
<!--Price-->
<div class="Price">
<h1>Price</h1>
$<span id="total"></span>
</div>
<script>
var price = document.getElementById('total');
var price1 = 0;
function pizza1(pizza){
price1 += pizza;
price.innerHTML = price1;
}
function Size(size1){
price1 += size1;
price.innerHTML = price1;
}
function topping(toppings1){
price1 += toppings1;
price.innerHTML = price1;
}
</script>
</body>
</html>
0
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<script type="text/javascript">
//bagaimana caranya agar user ketika mengklik pizza 1 nilai harga yang ada didalamnya
//tampil di price paling bawah dan mengurangi jika mengklik size dan bertambah harganya jika mengklik topping ?
</script>
<!--Header-->
<div class="header">
<h1>Pizza</h1>
</div>
<!--Pizza-->
<main>
<div id="menu1">
<div id="img1">
<img src="img/pizza-1.png" width="200" height="200">
</div>
<p>Pizza 1</p>
<p >$ 8</p>
<input type="radio" name="radio1" value="8" class="radio1" onclick="pizza1(8)">
</div>
<div id="menu2">
<div id="img2">
<img src="img/pizza-2.png" width="200" height="200">
</div>
<p>Pizza 2</p>
<p >$ 10</p>
<input type="radio" name="radio1" value="10" class="radio1" onclick="pizza1(10)">
</div>
<div id="menu3">
<div id="img3">
<img src="img/pizza-3.png" width="200" height="200">
</div>
<p>Pizza 3</p>
<p >$ 12</p>
<input type="radio" name="radio1" value="12" class="radio1" onclick="pizza1(12)">
</div>
</main>
<!--Size Small-->
<h1>Size</h1>
<div class="small">
<input type="radio" name="radio2" id="small" value="1" onclick="Size(1)">
<p>Small</p>
</div>
<!--Size Medium-->
<div class="medium">
<input type="radio" name="radio2" id="medium" value="0" onclick="Size(0)">
<p>Medium</p>
</div>
<!--Size Large-->
<div class="large">
<input type="radio" name="radio2" id="large" value="2" onclick="Size(2)">
<p>Large</p>
</div>
<!--Toppings-->
<h1>Toppings</h1>
<div class="toppings1">
<ul>
<li><input type="checkbox" id="cek1" name="cek" value="1" onclick="topping(1,'cek1')"> Avocado</li>
<li><input type="checkbox" id="cek2" name="cek" value="1" onclick="topping(1, 'cek2')"> Broccoli</li>
<li><input type="checkbox" id="cek3" name="cek" value="1" onclick="topping(1, 'cek3')"> Onions</li>
<li><input type="checkbox" id="cek4" name="cek" value="1" onclick="topping(1, 'cek4')"> Zucchini</li>
</ul>
</div>
<div class="toppings2">
<ul>
<li><input type="checkbox" id="cek5" name="cek" value="2" onclick="topping(2, 'cek5')"> Lobster</li>
<li><input type="checkbox" id="cek6" name="cek" value="2" onclick="topping(2, 'cek6')"> Oyster</li>
<li><input type="checkbox" id="cek7" name="cek" value="2" onclick="topping(2, 'cek7')"> Salmon</li>
<li><input type="checkbox" id="cek8" name="cek" value="2" onclick="topping(2, 'cek8')"> Tuna</li>
</ul>
</div>
<div class="toppings3">
<ul>
<li><input type="checkbox" id="cek9" name="cek" value="3" onclick="topping(3,'cek9')"> Bacon</li>
<li><input type="checkbox" id="cek10" name="cek" value="3" onclick="topping(3,'cek10')"> Duck</li>
<li><input type="checkbox" id="cek11" name="cek" value="3" onclick="topping(3,'cek11')"> Ham</li>
<li><input type="checkbox" id="cek12" name="cek" value="3" onclick="topping(3,'cek12')"> Sausage</li>
</ul>
</div>
<!--Price-->
<div class="Price">
<h1>Price</h1>
$<span id="total"></span>
</div>
<script>
var price = document.getElementById('total');
var price1 = 0;
function pizza1(pizza){
price1 = pizza;
price.innerHTML = price1;
}
function Size(size1){
var sm=document.getElementById('small').checked;
var lg=document.getElementById('large').checked;
if(sm==true){
price1-=size1;
}else if(lg==true){
price1+=size1;
}
price.innerHTML=price1;
}
function topping(toppings1,toppingid){
var topid = document.getElementById(toppingid).checked;
if(topid==true){
price1+=toppings1;
enable(toppingid);
}else{
price1-=toppings1;
disabled(toppingid);
}
price.innerHTML=price1;
}
//gan gimana caranya misalnya ketika pizza diganti, topping yang tadinya ke disable jadi
//enable buat pizza lainnya
/*
misalnya:
user milih pizza 1 yg disable topping: 5,6,7,9,10,12
user ganti dari pizza 1 ke 2 yg disable: 1,8,10,12
pizza 3, yg disable : 1,5,6,7
*/
function disabled(toppingid){
document.getElementById(toppingid).disabled=true;
}
function enable(toppingid){
document.getElementById(toppingid).disabled=false;
}
</script>
</body>
</html>
0