Postingan lainnya
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