83786


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

[code]

    <!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>
    
    
[/code]

[code]

    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);
    
    
[/code]


CC BY-SA 4.0
2021-11-24T00:46:47.140
83778
2021-11-24T08:56:05.253
48605
question
javascript
エラーの原因を突き止めたい（function toggleが機能しない）


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

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

[code]

    document.getElementById("reprodrights").addEventListener("change", toggleMembook, false);
    
[/code]

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

[code]

    photographerCost = num.value * 100 * hrs.value + distance.value * num.value;
    
[/code]

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

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

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

[code]

    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);
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2021-11-24T07:47:50.390
83786
2021-11-24T08:56:05.253
2021-11-24T08:56:05.253
3060
22665
83778
answer