- リスト### 前提・実現したいこと
複数商品をカートに入れた後、
”ー”ボタンを押すと商品に関係なく合計金額から値段が引かれてしまう。
ちなみにGitHubのこのデータになります↓
リンク内容
Olive.html上で、カート追加するとカートに入っていない商品の”ー”を押しても合計金額が引かれる。
加えて、もし可能であれば、チェックアウト画面に前ページのカート情報が反映されるようなコードも知りたいです。(データ上は反映されない)
例
1000円商品がカートにある
↓
カートに入っていない600円の商品の”ー”ボタンを押すと
金額が600円引かれる
コード
var total = 0;
// Dishes represents the appetizer prices only
var dish1 = 0;
var dish2 = 0;
var dish3 = 0;
var dish4 = 0;
var dish5 = 0;
var dish6 = 0;
var dish7 = 0;
var dish8 = 0;
var dish9 = 0;
var dish10 = 0;
var dish11 = 0;
// Prices for Dishes
var price1 = 1000;
var price2 = 1000;
var price3 = 1500;
var price4 = 1500;
var price5 = 650;
var price6 = 800;
var price7 = 1000;
var price8 = 800;
var price9 = 800;
var price10 = 800;
var price11 = 800;
var price12 = 0;
var price13 = 0;
var price14 = 0;
// Num represents dish numbers
function changeQuantity(amount,num)
{
var displayDish = 0; // Represents the dish the needs to be shown
if(num == 1)
{
if(dish1+amount>=0) {
dish1+=amount;
}
displayDish = 1;
updateTotal(amount,price1);
}
else if(num == 2)
{
if(dish2+amount>=0) {
dish2+=amount;
}
displayDish = 2;
updateTotal(amount,price2);
}
else if(num == 3)
{
if(dish3+amount>=0) {
dish3+=amount;
}
displayDish = 3;
updateTotal(amount,price3);
}
else if(num == 4)
{
if(dish4+amount>=0) {
dish4+=amount;
}
displayDish = 4;
updateTotal(amount,price4);
}
else if(num ==5)
{
if(dish5+amount>=0) {
dish5+=amount;
}
displayDish = 5;
updateTotal(amount,price5);
}
else if(num ==6)
{
if(dish6+amount>=0) {
dish6+=amount;
}
displayDish = 6;
updateTotal(amount,price6);
}
else if(num ==7)
{
if(dish7+amount>=0) {
dish7+=amount;
}
displayDish = 7;
updateTotal(amount,price7);
}
else if(num ==8)
{
if(dish8+amount>=0) {
dish8+=amount;
}
displayDish = 8;
updateTotal(amount,price8);
}
else if(num ==9)
{
if(dish9+amount>=9) {
dish9+=amount;
}
displayDish = 9;
updateTotal(amount,price9);
}
else if(num ==10)
{
if(dish10+amount>=10) {
dish10+=amount;
}
displayDish = 10;
updateTotal(amount,price10);
}
displayQuantity(displayDish);
}
function updateTotal(amount,price)
{
if(amount == -1 && (total-price >= 0))
{
total-=price;
}
else if(amount == 1){
total+=price;
}
displayTotal();
}
function displayQuantity(num)
{
if(num === 1)
{
document.getElementById("quantity1-1").innerHTML = dish1.toString();
document.getElementById("quantity1-2").innerHTML = dish1.toString();
if(dish1 === 0)
{
document.getElementById("check1").style.display = 'none';
}
else{
document.getElementById("check1").style.display = 'block';
}
}
else if(num == 2)
{
document.getElementById("quantity2-1").innerHTML = dish2.toString();
document.getElementById("quantity2-2").innerHTML = dish2.toString();
if(dish2 === 0)
{
document.getElementById("check2").style.display = 'none';
}
else{
document.getElementById("check2").style.display = 'block';
}
}
else if(num == 3)
{
document.getElementById("quantity3-1").innerHTML = dish3.toString();
document.getElementById("quantity3-2").innerHTML = dish3.toString();
if(dish3 === 0)
{
document.getElementById("check3").style.display = 'none';
}
else{
document.getElementById("check3").style.display = 'block';
}
}
else if(num == 4)
{
document.getElementById("quantity4-1").innerHTML = dish4.toString();
document.getElementById("quantity4-2").innerHTML = dish4.toString();
if(dish4 === 0)
{
document.getElementById("check4").style.display = 'none';
}
else{
document.getElementById("check4").style.display = 'block';
}
}
else if(num == 5)
{
document.getElementById("quantity5-1").innerHTML = dish5.toString();
document.getElementById("quantity5-2").innerHTML = dish5.toString();
if(dish5 === 0)
{
document.getElementById("check5").style.display = 'none';
}
else{
document.getElementById("check5").style.display = 'block';
}
}
else if(num == 6)
{
document.getElementById("quantity6-1").innerHTML = dish6.toString();
document.getElementById("quantity6-2").innerHTML = dish6.toString();
if(dish6 === 0)
{
document.getElementById("check6").style.display = 'none';
}
else{
document.getElementById("check6").style.display = 'block';
}
}
else if(num == 7)
{
document.getElementById("quantity7-1").innerHTML = dish7.toString();
document.getElementById("quantity7-2").innerHTML = dish7.toString();
if(dish7 === 0)
{
document.getElementById("check7").style.display = 'none';
}
else{
document.getElementById("check7").style.display = 'block';
}
}
else if(num == 8)
{
document.getElementById("quantity8-1").innerHTML = dish8.toString();
document.getElementById("quantity8-2").innerHTML = dish8.toString();
if(dish8 === 0)
{
document.getElementById("check8").style.display = 'none';
}
else{
document.getElementById("check8").style.display = 'block';
}
}
else if(num == 9)
{
document.getElementById("quantity9-1").innerHTML = dish9.toString();
document.getElementById("quantity9-2").innerHTML = dish9.toString();
if(dish9 === 0)
{
document.getElementById("check9").style.display = 'none';
}
else{
document.getElementById("check9").style.display = 'block';
}
}
else if(num == 10)
{
document.getElementById("quantity10-1").innerHTML = dish10.toString();
document.getElementById("quantity10-2").innerHTML = dish10.toString();
if(dish10 === 0)
{
document.getElementById("check10").style.display = 'none';
}
else{
document.getElementById("check10").style.display = 'block';
}
}
}
function displayTotal()
{
var result = Math.round(total*100) / 100;
result = result.toFixed(2);
document.getElementById("total").innerHTML = result.toString();
}
その他のページが必要な際はご連絡ください。
お手数おかけいたしますが、
よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
10000文字超えてたのでcodepenに上げました。
https://codepen.io/nanasido/pen/abmRjzo
考え方
単純に注文数が0の時に−ボタンが押せなければよい。
cssで最初から-ボタンを押せなくする。
jsで
+ボタンを押したら-ボタンを押せるようにする。
注文数が1の時、-ボタンを押したら-ボタンを押せなくする。
htmlの記述はolive.html
cssの記述はolive.css
jsの記述はmenu.jsにそれぞれ対応してます。
>>チェックアウト画面に前ページのカート情報が反映されるようなコード
これはおそらく、メニューを切り替えた場合、+ボタンを押しても反映されないということを言っていると予測し
5番目のメニュー
Main Courseの
Lasagna Classico これだけ反映されるようにしました。
他のメニューも追加したいのであれば
5番目のメニューを参考にhtml,css,jsをそれぞれ記述してください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
Jon_do
2021/01/12 23:05
状況がこちらでも再現できるコードが必須です。