

現在費用を計算するページを作成しているのですがtotal
estimateの金額がブラウザに表示されません。estimateにidをつけて呼び出してはいるのですが、順序が違うのでしょうか。

コンソールでのエラー表示はありません。どなたか回答よろしくお願いします。

HTML

[code]

       <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" />
       <!--[if lt IE 9]>
          <link rel="stylesheet" href="ftie.css" />
       <![endif]-->
       <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]

JavaScript

[code]

    var photographerCost = 0;
    var totalCost = 0;
    var memoryBook = false;
    var reproductionRights = false;
    function calcStaff(){
      var num = document.getElementById("photognum");
      var hrs = document.getElementById("photoghrs");
      var distance = document.getElementById("distance");
      totalCost -= photographerCost;
      photographerCost = num.value * 100 * hrs.value + distance.value * num.value;
      totalCost += photographerCost;
      document.getElementById("estimate").innerHTML = "$" + totalCost;
    }
      function toggleMembook(){
        (document.getElementById("membook").checked === false)?
        totalCost -= 250 : totalCost += 250;
        document.getElementById("estimate").innerHTML = "$"+ totalCost;
    }
    function toggleRights(){
      (document.getElementById("reprodrights").checked === false)?
      totalCost -= 1250 : totalCost += 1250;
      document.getElementById("estimate").innerHTML = "$" + totalCost;
    }
    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();
    }
    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);
    }
    
[/code]


CC BY-SA 4.0
2021-10-21T18:44:19.043
83205
2021-10-22T00:07:24.153
2021-10-22T00:07:24.153
3060
48605
question
javascript html
total estimate の表示