0

toggle機能を使ってボックスがチェックされたら合計金額に追加するコードを書きたいのですがMemorybook及びreprodctionRightsの金額が合計に反映されません。コンソール上でのエラー表示はなく原因がわかりません。また同様にdistanceの金額も反映されない状態です。原因がわかる方がいましたら解答よろしくお願いします。

<!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Fan Trick Fine Art Photography - Estimate</title>
   <link rel="stylesheet" media="screen and (max-device-width: 999px)" href="fthand.css" />
   <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="fantrick.css" />
   <link href='http://fonts.googleapis.com/css?family=Mr+Bedfort' rel='stylesheet' type='text/css'>
   <script src="modernizr.custom.05819.js"></script>
</head>

<body>
   <div id="container">
      <header>
         <h1>
            <img src="images/ftlogo.png" alt="Fan Trick Fine Art Photography" title="" />
         </h1>
      </header>

      <nav>
         <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li id="currentpage"><a href="#">Estimate</a></li>
            <li><a href="digital.htm">Digital 101</a></li>
         </ul>
      </nav>

      <article>
         <h2>Estimate</h2>
         <p>Our experienced, professional photography team is available to capture memories of your wedding, celebration, or other special event.</p>
         <p>Choose the custom options that fit your needs:</p>
         <form id="estimateform">
            <fieldset>
               <legend><span>Photography</span></legend>
               <input type="number" min="0" max="4" id="photognum" value="1" />
               <label for="photognum">
                  <p># of photographers (1&#8209;4)</p>
                  <p>$100/hr</p>
               </label>

               <input type="number" min="2" id="photoghrs" value="2" />
               <label for="photoghrs">
                  <p># of hours to photograph (minimum&nbsp;2)</p>
               </label>

               <input type="checkbox" id="membook" />
               <label for="membook">
                  <p>Memory book</p>
                  <p>$250</p>
               </label>

               <input type="checkbox" id="reprodrights" />
               <label for="reprodrights">
                  <p>Reproduction rights for all photos</p>
                  <p>$1250</p>
               </label>
            </fieldset>
            <fieldset>
               <legend><span>Travel</span></legend>
               <input type="number" id="distance" value="0" />
               <label for="distance">
                  <p>Event distance from Austin, TX</p>
                  <p>$1/mi per photographer</p>
               </label>
            </fieldset>
         </form>
      </article>
      <aside>
         <p>Total Estimate: <span id="estimate"></span></p>
      </aside>
      <footer>
         <p>Fan Trick Fine Art Photography &bull; Austin, Texas</p>
      </footer>
   </div>
   <script src="ft.js"></script>
</body>
</html>

function calcStaff(){
  var num = document.getElementById("photognum");
  var hrs = document.getElementById("photoghrs");
  var distance = document.getElementById("distance");
  totalCost -= photographerCost;   //totalcost= totalCost - photographerCost
  photographerCost = num.value * 100 * hrs.value + distance.value * num.value;
  totalCost += photographerCost;
  document.getElementById("estimate").innerHTML = "$" + totalCost;  
}

//adds/subtracts cost of memory book from total cost 
function toggleMembook(){
  (document.getElementById("membook").checked === false) ?
  totalCost -= 250 : totalCost += 250;
  document.getElementById("estimate").innerHTML =
  "$" + totalCost;
}
//adds/subtracts cost of reproduction rights from total estimate
function toggleRights(){
 (document.getElementById("reprodrights").checked === false) ?
 totalCost -= 1250 : totalCost += 1250;
 document.getElementById("estimate").innerHTML =
 "$" + totalCost;
}
//sets all form field values to defaults 
function resetForm(){
  document.getElementById("photognum").value =1;
  document.getElementById("photoghrs").value =2;
  document.getElementById("membook").checked = memoryBook;
  document.getElementById("reprodrights").checked =reproductionRights;
  document.getElementById("distance").value =0;
  calcStaff(); 
  createEventListeners();
  }

//create event listeners
function createEventListeners(){
  document.getElementById("photognum").addEventListener("change", calcStaff, false);
  document.getElementById("photoghrs").addEventListener("change", calcStaff, false);  
  document.getElementById("membook").addEventListener("change", toggleMembook, false);
  document.getElementById("reprodrights").addEventListener("change", toggleMembook, false);
  document.getElementById("distance").addEventListener("change", calcStaff, false);
}
  //global Variables
  var photographerCost = 0;
  var totalCost = 0;
  var memoryBook = false;
  var reproductionRights = false;

window.addEventListener("load", resetForm, false);

1 件の回答 1

0

Memorybook及びreprodctionRightsの金額が合計に反映されません。

正確に言うとreprodctionRightsの変更時にtoggleMembookが呼ばれているため、おかしくなっています。正しい関数toggleRightsを呼び出しましょう。

document.getElementById("reprodrights").addEventListener("change", toggleMembook, false);

distanceが反映されない状態とありますが正しく反映されているようです。
以下の計算式をもとにdistanceの計算がされているのでこの計算式が合っているかどうか改めて確認してみてください。これ以上は要件を確認しないとわかりませんので省略します。

photographerCost = num.value * 100 * hrs.value + distance.value * num.value;

さらに今回デバッグ用にconsole.logを埋め込んでいます。開発が終わったら外してください。

今回は各関数の最初にconsole.logを埋め込むことで、toggleRightsが一度も呼ばれていないことに気づきました。

ということで助言ですが、まずはデバッグ方法を学びましょう。関数が動いているのか正しい変数が出力されているのかを調べるためにはデバッグ方法を学ばなければなりません。ソースコードを眺めるだけではプログラムの修正はできません。プログラムを動かしてみて正しく動くかはひたすらデバッグするしかないです。
最もシンプルなやり方がconsole.logで追いかけることです。これができるようになりましょう。
「console.log デバッグ」で調べればいくつも記事が出てくるのでそちらを参考にいろいろ挑戦してみてください。

function calcStaff(){
console.log("start calcStaff");
  var num = document.getElementById("photognum");
  var hrs = document.getElementById("photoghrs");
  var distance = document.getElementById("distance");
  totalCost -= photographerCost;   //totalcost= totalCost - photographerCost
  photographerCost = num.value * 100 * hrs.value + distance.value * num.value;
  totalCost += photographerCost;
  document.getElementById("estimate").innerHTML = "$" + totalCost;  
}

//adds/subtracts cost of memory book from total cost 
function toggleMembook(){
console.log("start toggleMembook");
(document.getElementById("membook").checked === false) ?
  totalCost -= 250 : totalCost += 250;
  document.getElementById("estimate").innerHTML =
  "$" + totalCost;
}
//adds/subtracts cost of reproduction rights from total estimate
function toggleRights(){
console.log("start toggleRights");
(document.getElementById("reprodrights").checked === false) ?
 totalCost -= 1250 : totalCost += 1250;
 document.getElementById("estimate").innerHTML =
 "$" + totalCost;
}
//sets all form field values to defaults 
function resetForm(){
console.log("start resertForm");
  document.getElementById("photognum").value =1;
  document.getElementById("photoghrs").value =2;
  document.getElementById("membook").checked = memoryBook;
  document.getElementById("reprodrights").checked =reproductionRights;
  document.getElementById("distance").value =0;
  calcStaff(); 
  createEventListeners();
  }

//create event listeners
function createEventListeners(){
  document.getElementById("photognum").addEventListener("change", calcStaff, false);
  document.getElementById("photoghrs").addEventListener("change", calcStaff, false);  
  document.getElementById("membook").addEventListener("change", toggleMembook, false);
  document.getElementById("reprodrights").addEventListener("change", toggleRights, false);
  document.getElementById("distance").addEventListener("change", calcStaff, false);
}
  //global Variables
  var photographerCost = 0;
  var totalCost = 0;
  var memoryBook = false;
  var reproductionRights = false;

window.addEventListener("load", resetForm, false);
<div id="container">
      <header>
         <h1>
            <img src="images/ftlogo.png" alt="Fan Trick Fine Art Photography" title="" />
         </h1>
      </header>

      <nav>
         <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li id="currentpage"><a href="#">Estimate</a></li>
            <li><a href="digital.htm">Digital 101</a></li>
         </ul>
      </nav>

      <article>
         <h2>Estimate</h2>
         <p>Our experienced, professional photography team is available to capture memories of your wedding, celebration, or other special event.</p>
         <p>Choose the custom options that fit your needs:</p>
         <form id="estimateform">
            <fieldset>
               <legend><span>Photography</span></legend>
               <input type="number" min="0" max="4" id="photognum" value="1" />
               <label for="photognum">
                  <p># of photographers (1&#8209;4)</p>
                  <p>$100/hr</p>
               </label>

               <input type="number" min="2" id="photoghrs" value="2" />
               <label for="photoghrs">
                  <p># of hours to photograph (minimum&nbsp;2)</p>
               </label>

               <input type="checkbox" id="membook" />
               <label for="membook">
                  <p>Memory book</p>
                  <p>$250</p>
               </label>

               <input type="checkbox" id="reprodrights" />
               <label for="reprodrights">
                  <p>Reproduction rights for all photos</p>
                  <p>$1250</p>
               </label>
            </fieldset>
            <fieldset>
               <legend><span>Travel</span></legend>
               <input type="number" id="distance" value="0" />
               <label for="distance">
                  <p>Event distance from Austin, TX</p>
                  <p>$1/mi per photographer</p>
               </label>
            </fieldset>
         </form>
      </article>
      <aside>
         <p>Total Estimate: <span id="estimate"></span></p>
      </aside>
      <footer>
         <p>Fan Trick Fine Art Photography &bull; Austin, Texas</p>
      </footer>
   </div>

3
  • @keitaro_so ご丁寧なご回答ありがとうございます。デバッグ作業について少し学習し、toggleMembookおよびtoggleRIghtsがundefinedになっていることがわかりました。しかしその解決策に今だつまづいている状態です。またdistanceについては計算式は再度確認し、あっていると思うのですが合計金額に加算されません。これらの解決策をご教授いただきたいです。
    – Suzu
    2021年11月24日 23:48
  • 1
    私の回答の「スニペットを実行」を押してもらえればわかりますが、正しく動作しているように見受けれられます。特にundefindにもなっていません。合計金額もきちんと1ずつ加算されているように見受けれます。お手数ですがスニペット等を用いて再現する環境を作ってもらわないとこれ以上は追えない可能性があります
    – keitaro_so
    2021年11月25日 1:00
  • @keitaro_so  最後は単純なスペルミスでした。助かりました。ありがとうございました!!
    – Suzu
    2021年11月27日 4:38

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。