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

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

ただいまの
回答率

88.32%

買い物カゴのSelectの表示と合計額の算出方法について

解決済

回答 2

投稿

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

Nobu_Nobuta

score 24

下記htmlとJavaScriptコードにて、買い物カゴを作成しておりますが、
2点、分からないことがあります。

買い物カゴのイメージ

<body>

  <!-- *******     商品メニュー始め    ******* -->
  <div class="contents">

    <div class="item-wrapper item-inner">
      <div class="item-left">
      </div>
      <div class="item-right">
        <div class="item-name">
          <h3>
            <a href="#" id="nameEver">🇻🇳エバーグリーン18</a>
          </h3>
        </div>
        <div class="item-select">
          <select class="item" id="itemEver" tabindex="0">
            <option value="865" name="500g 865円" selected>500g 865円</option>
            <option value="1638" name="1kg 1638円">1kg 1638円</option>
            <option value="6915" name="5kg 6915円">5kg 6915円</option>
          </select>

          <label for="setEver"> X
            <select class="set" id="setEver" tabindex="0">
              <option value="" selected>0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>
            セット</label>
          <button type="button" id="buyEver">カートに入れる</button>
        </div>
      </div>
    </div>

    <div class="item-wrapper item-inner">
      <div class="item-left">
      </div>
      <div class="item-right">
        <div class="item-name">
          <h3>
            <a href="#" id="nameWashed">🇻🇳トイ・スペシャル・ウォッシュド</a>
          </h3>
        </div>
        <div class="item-select">
          <select class="item" id="itemWashed" tabindex="0">
            <option value="931" name="500g 931円" selected>500g 931円</option>
            <option value="1764" name="1kg 1764円">1kg 1764円</option>
            <option value="8035" name="5kg 8035円">5kg 8035円</option>
          </select>

          <label for="setWashed"> X
            <select class="set" id="setWashed" tabindex="0">
              <option value="" selected>0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>
            セット</label>

          <button type="button" id="buyWashed">カートに入れる</button>
        </div>
      </div>
    </div>
  <!-- *******     商品メニュー終り    ******* -->

  <!-- *******       税別合計始め      ******* -->
    <div class="item-wrapper item-inner">
      <table class="cart" border="1" style="border-collapse: collapse">
        <thead>
          <tr>
            <th colspan="4">買い物カート</th>
          </tr>
          <tr>
            <th>商品名・数量・単価</th>
            <th>セット</th>
            <th>小計</th>
            <th>変更</th>
          </tr>
        </thead>
        <tbody id="todoList">

        </tbody>
        <tr>
          <td colspan="2" class="text-right">税別合計</td>
          <td class="total-box" id="exTax"></td>
          <td></td>
        </tr>
      </table>
    </div>
    <!-- *******       税別合計終り      ******* -->

  </div>
  <script src="js/main1.js"></script>
</body>
'use strict'; {

//○○○○○○○○○○○○○   カート始め   ○○○○○○○○○○○○○

//*****  商品追加開始  *****
window.addEventListener('DOMContentLoaded', () => {

  const buyEver = document.getElementById('buyEver');

  const buyWashed = document.getElementById('buyWashed');


  //*****  エバーグリーン  *****
  buyEver.addEventListener('click', () => {

    const nameEver = document.getElementById('nameEver');
    const nameEverText = nameEver.text;

    const itemEver = document.getElementById('itemEver');
    const itemEverName = itemEver.name;
    console.log(itemEver.name);
    const itemEverValue = itemEver.value;

    //▲▲▲▲ tr エレメントを新規作成(ただ生成するだけ) ▲▲▲▲
    const taskElement = document.createElement('tr');


    //---- td 商品名エレメントを新規作成 ----
    const goodsElement = document.createElement('td');
    goodsElement.classList.add('goods');
    const setEver = document.getElementById('setEver');
    const setEverValue = setEver.value;


    goodsElement.textContent = nameEverText;

    //---- div 数量・単価エレメントを新規作成 ----
    const unitElement = document.createElement('div');
    unitElement.classList.add('unit');
    unitElement.textContent = itemEverName;


    //---- td qtyエレメントを新規作成 ----
    const qtyElement = document.createElement('td');
    qtyElement.classList.add('qty');
    if (setEverValue == '') {
      return false;
    } else {
      qtyElement.textContent = setEverValue;
    }

    //---- td subtotalエレメントを新規作成 ----
    const subTotalElement = document.createElement('td');
    subTotalElement.classList.add('total-box');

    const subTotalEver = itemEverValue * setEverValue;

    subTotalElement.textContent = `${subTotalEver}円`;




    //---- td removeBtnエレメントを新規作成 ----
    const removeBtnElement = document.createElement('td');
    removeBtnElement.classList.add('amend');
    const removeBtn = createRemoveBtn();
    removeBtnElement.appendChild(removeBtn);

    //生成したtrをtodolistにセット
    todoList.appendChild(taskElement);

    //生成したtdをtrにセット
    taskElement.appendChild(goodsElement);
    taskElement.appendChild(qtyElement);
    taskElement.appendChild(subTotalElement);
    taskElement.appendChild(removeBtnElement);

    //生成したdivをtdにセット
    goodsElement.appendChild(unitElement);

  });

  //*****  ウォッシュド  *****
  buyWashed.addEventListener('click', () => {

    const nameWashed = document.getElementById('nameWashed');
    const nameWashedText = nameWashed.text;

    const itemWashed = document.getElementById('itemWashed');
    const itemWashedName = itemWashed.name;
    const itemWashedValue = itemWashed.value;

    //▲▲▲▲ tr エレメントを新規作成(ただ生成するだけ) ▲▲▲▲
    const taskElement = document.createElement('tr');


    //---- td 商品名エレメントを新規作成 ----
    const goodsElement = document.createElement('td');
    goodsElement.classList.add('goods');
    const setWashed = document.getElementById('setWashed');
    const setWashedValue = setWashed.value;


    goodsElement.textContent = nameWashedText;

    //---- div 数量・単価エレメントを新規作成 ----
    const unitElement = document.createElement('div');
    unitElement.classList.add('unit');
    unitElement.textContent = itemWashedName;


    //---- td qtyエレメントを新規作成 ----
    const qtyElement = document.createElement('td');
    qtyElement.classList.add('qty');
    if (setWashedValue == '') {
      return false;
    } else {
      qtyElement.textContent = setWashedValue;
    }

    //---- td subtotalエレメントを新規作成 ----
    const subTotalElement = document.createElement('td');
    subTotalElement.classList.add('total-box');

    const subTotalWashed = itemWashedValue * setWashedValue;
    subTotalElement.textContent = `${subTotalWashed}円`;

    //---- td removeBtnエレメントを新規作成 ----
    const removeBtnElement = document.createElement('td');
    removeBtnElement.classList.add('amend');
    const removeBtn = createRemoveBtn();
    removeBtnElement.appendChild(removeBtn);

    //生成したtrをtodolistにセット
    todoList.appendChild(taskElement);

    //生成したtdをtrにセット
    taskElement.appendChild(goodsElement);
    taskElement.appendChild(qtyElement);
    taskElement.appendChild(subTotalElement);
    taskElement.appendChild(removeBtnElement);

    //生成したdivをtdにセット
    goodsElement.appendChild(unitElement);

  });


  //----------------------------------------
  // removeBtnを生成する関数
  // [引数]
  //   なし
  // [戻り値]
  //   removeBtn:タスクを削除するボタン
  //----------------------------------------
  const createRemoveBtn = function() {
    const removeBtn = document.createElement('button');
    removeBtn.textContent = `削除`;

    //●●●● removeBtn押下時のイベントを追加 ●●●●
    removeBtn.addEventListener('click', (e) => {
      removeBtn.parentNode.parentNode.parentNode.removeChild(removeBtn.parentNode.parentNode);
    });

    return removeBtn;
  }

  //*****  商品追加終了  *****
});


  //*****  税別合計始め  *****
const exTax = document.getElementById('exTax');

let totalExTax = 0;

exTax.textContent = `${totalExTax}円`;

//*****  税別合計終り  *****

//○○○○○○○○○○○○○   カート終り   ○○○○○○○○○○○○○

  // 'use strict'の終わり
}

質問1:「カートに入れる」を発火点として、
addEventListener内で生成した下記2コードを税別合計に足しこみたいのですが
ローカルスコープからグローバルスコープに取り出す事が出来ず、合計額の算出方法が
分かりません。

subTotalElement.textContent = ${subTotalEver}円;
subTotalElement.textContent = ${subTotalWashed}円;

質問2:下記のように、カートボタンを押すと押した商品名、セレクトで選択した内容を
表示したいです。

セレクトの内容

方法として、htmlセレクトタグに
<option value="1638" name="1kg 1638円">1kg 1638円</option>
といった感じで、nameタグを振り、
const itemEver = document.getElementById('itemEver');
const itemEverName = itemEver.name;
として、コンソール表示してみたのですが、undefindでも、nullでもなく、空白でコンソール表示されてしまいます。
console.log(itemEverName);

結果として、下記、divを生成しても未表示扱いとされてしまいます。

//---- div 数量・単価エレメントを新規作成 ----
const unitElement = document.createElement('div');
unitElement.classList.add('unit');
unitElement.textContent = itemEverName;

2点、大変恐縮ですが、解決の為のアドバイスを頂ければ幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1


質問1: (略)... ローカルスコープからグローバルスコープに取り出す事が出来ず、合計額の算出方法が分かりません。

関数にして、カートに追加の処理の最後に呼ぶようにしました。

★マークがついた部分が追加/変更した部分です

let totalExTax = 0; // ★ ここはグローバルにした

function addExTax(price) { // ★ これは関数にした
    //*****  税別合計始め  *****
    const exTax = document.getElementById('exTax');

    totalExTax += price; // ★ 合計に追加

    exTax.textContent = `${totalExTax}円`;

    //*****  税別合計終り  *****

    //○○○○○○○○○○○○○   カート終り   ○○○○○○○○○○○○○
}
  buyEver.addEventListener('click', () => {
    ... 
    addExTax(subTotalEver); // ★ 最後の行に追加
  });
  buyWashed.addEventListener('click', () => {
    ... 
    addExTax(subTotalWashed); // ★ 最後の行に追加
  });

質問2:下記のように、カートボタンを押すと押した商品名、セレクトで選択した内容を
表示したいです。

~未確認~

→ ほかの方が既に答えていたので中断

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/06 23:14

    Teratailのルールとしては、新規スレッドを立てた方が良いでしょうか。
    削除ボタンを押した時にマイナスする関数が分からなかった時は、
    またご相談させて下さい。

    キャンセル

  • 2019/10/06 23:16

    もとの質問と異なる内容なのだから、
    分けたほうが答えが得られやすいと思いますよ。

    キャンセル

  • 2019/10/06 23:18

    ご指導ありがとうございます。
    そのように致します。

    キャンセル

+1

質問1について、
やりかたはいくつかあると思いますが、小計額を求めたタイミングで関数を呼び出すのはどうでしょうか。

subTotalElement.textContent = ${subTotalEver}円;
addTotal(subTotalEver);

subTotalElement.textContent = ${subTotalWashed}円;
addTotal(subTotalWashed);


function addTotal(subTotal) {
    const exTax = document.getElementById('exTax');
    const total = Number(exTax.textContent.replace('円', ''));
    const totalExTax = total + subTotal;
    exTax.textContent = `${totalExTax}円`;
}

質問2について、
optionタグにname属性はつけません。
セレクトボックスに表示されているラベルをそのまま取得することができます。

const itemEver = document.getElementById('itemEver');
const idx = itemEver.selectedIndex;  //追加
//const itemEverName = itemEver.name;  //削除
const itemEverName = itemEver.options[idx].text;  //追加
//console.log(itemEver.name);  //削除
console.log(itemEver);  //追加
const itemEverValue = itemEver.value;

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/06 10:27

    長文なコードにも関わらず、ご丁寧なご回答ありがとうございました。
    何日も悩んでいたのですが、おかげでスッキリしました。

    キャンセル

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

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

関連した質問

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