質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

Javascript カートの合計金額(注文していない商品をマイナスしても、その商品の金額が引かれてしまう)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 144

Brisk

score 2

  • リスト### 前提・実現したいこと

複数商品をカートに入れた後、
”ー”ボタンを押すと商品に関係なく合計金額から値段が引かれてしまう。

ちなみに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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Jon_do

    2021/01/12 23:05

    状況がこちらでも再現できるコードが必須です。

    キャンセル

回答 1

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をそれぞれ記述してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/01/13 22:59

    なるほど。
    やはり他言語使用が必要なんですね。
    当方かなりの素人のため、勉強になりました。

    ちなみにクレジットカード等の個人情報を
    上記サイトを用いて扱う予定は今のところありません。

    チェックアウト情報が、指定メール送られるのみの使用にしたい場合、
    簡易的なPHPを用いての実現可能でしょうか。

    キャンセル

  • 2021/01/13 23:41

    可能です。今回の機能ならほぼphpで作ったほうが無難なような気がします

    キャンセル

  • 2021/01/14 00:04

    なるほど!
    ちょっと設計し直してみます!

    お忙しいところ
    色々とありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る