JavaScript onclick関数は実行されません

Question

JavaScriptの新機能で、このコードに間違いがありません。アイテムの量を計算するはずです。これをどのように機能させることができますか？

（私は似たタイトルの記事がたくさんを通して見てきたが、問題を把握できませんでした。）

function calculate() { 
 

 
var total = 0; 
 

 
if (document.getElementById('cb1').checked == true) 
 

 
{ total = total + 25;} 
 

 
if (document.getElementById('cb2').checked == true) 
 

 
{ total = total + 50;} 
 

 
if (document.getElementById('cb3').checked == true) 
 

 
{ total = total + 75;} 
 

 
if (document.getElementById('cb4').checked == true) 
 

 
{ total = total + 100;} 
 

 
document.getElementById('output').innerhtml = '€' + total; 
 

 
}

#output { 
 
width: 400px; 
 
font-size: 2em; 
 
height: 1.5em; 
 
line-height: 1.5em; 
 
background: #dddddd; 
 

 
}

<h1> Checkout </h1> 
 

 
<p> Select a product below:</p> 
 
<p>Product 1 <input type ="checkbox" id="cb1"></p> 
 
<p>Product 2 <input type ="checkbox" id="cb2"></p> 
 
<p>Product 3 <input type ="checkbox" id="cb3"></p> 
 
<p>Product 4 <input type ="checkbox" id="cb4"></p> 
 

 

 
<button onclick="calculate()">Calculate</button> 
 

 
<div id="output"> 0 </div>

Answer 1

あなたはこの行にタイプミスがあり、それはinnerHTMLですないinnerhtml：

document.getElementById('output').innerhtml = '€' + total; 

は次のようになります。

document.getElementById('output').innerHTML = '€' + total; 

Answer 2

calculate機能が実行されています。問題は、代わりに次の行の範囲内にある：

document.getElementById('output').innerhtml = '€' + total; 

要素のHTML値を設定し、あなたがinnerHTMLを使用する必要があります。大文字に注意してください。

document.getElementById('output').innerHTML = '€' + total; 

変更すると、あなたは金色です。

Answer 3

あなたはinnerHTMLの代わりinnerhtmlを使用して<script></script>

例内のスクリプトを配置する必要があります：私はjavascriptのための新しいだったとき、私は覚えてonclick event

Answer 4

。ああ！マンマミア！ここで私はあなたに例を提供し、あなたがアイデアをキャッチするなら、正しい方法を得るでしょう。怖がらないでください、その非常にシンプルですが、それはどのようにjavascriptのように見えるかのアイデアを与えるでしょう。

誰かが私の初めにそれを私に説明したなら、私はもっと幸せになるかもしれません。

最後に、あなたの質問に対する回答が見つかります。

HTML：

<p>Product 1 <input type="checkbox" id="cb1"></p> 
    <p>Product 2 <input type="checkbox" id="cb2"></p> 
    <p>Product 3 <input type="checkbox" id="cb3"></p> 
    <p>Product 4 <input type="checkbox" id="cb4"></p> 
    <button id="myButtonClick">calculate</button> 

Javascriptを：

 /* 
     * First of all, try to think next way. 
     * In javascript each element, let's say Integer or String 
     * IS an Object. That means it supposed to work with 
     * anything as we work with an object. 
     * 
     * I could be much happier if somebody explained 
     * me that on my beginning. 
     */ 
     var classCalator = function(){ 

      var total = 0; 

      /* 
      * use function recursively instead of useing a bunch of if's 
      * of foeach or for or ... 
      */ 
      var isChecked = function(element){ 
       var elementID = element[0]; 
       return !!(document.getElementById(elementID).checked); 
      }; 

      var totalize = function(element){ 
       var elementNumberForSum = element[1]; 
       total =+ elementNumberForSum; 
      }; 

      /* 
      * use function recursively instead of useing a bunch of if's 
      * of foeach or for or ... 
      */ 
      this.calculate = function(configElements){ 
       var elements = configElements; 
       var element = elements[0]; 
       if(!!element && isChecked(element)){ 
        totalize(element); 
        //remove first element that is already prepared 
        elements.shift(); 
        //recursively do same staff with each element from conf 
        this(elements); 
       } 
       //return total that we were looking for 
       return total; 
      }; 
     }; 

     var calculatorConfig = function(){ 
      /* 
      * Reference to this class (config function) reference to it self 
      * to get access to it in the children classes; 
      * 
      * @type Object 
      */ 
      var conf = this; 

      /* 
      * array of element that you want to prepare to not use 
      * is statements if(){} is evil you understand that later but 
      * now learn and write this way. 
      * 
      * @type Array 
      */ 
      var elemntsConfig = []; 

      /* 
      * That is an children class (object) of the our 
      * config class (function). It just push all elements to array. 
      * 
      * @return null 
      */ 
      this.setElement = function(elementID, specificNumber){ 
       var record = [elementID, specificNumber]; 
       elemntsConfig.push(record); 
      }; 

      /* 
      * Just retrive our elemntsConfig 
      * 
      * @return Array 
      */ 
      this.getConfig = function(){ 
       return elemntsConfig; 
      }; 
     }; 


     var calculateFactory = function(){ 

      var calculator = new classCalator(); 
      var configuration = new calculatorConfig(); 
      //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
      //Now you can add as many checkboses 
      //as you want and no need more ifs' 
      //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
      configuration.setElement('cb1', 10); 
      configuration.setElement('cb2', 10); 
      configuration.setElement('cb3', 20); 
      configuration.setElement('cb4', 10); 
      //here I just retrive my classes 
      var config = configuration.getConfig(); 
      //and initialize calculations 
      var total = calculator.calculate(config); 

      console.log(total); 
     }; 

     var myButtonClick = document.getElementById('myButtonClick'); 

     myButtonClick.addEventListener("click", calculateFactory); 

エラーが発生した場所を見つけるには、ブラウザのコンソールを使用してください。代わりにonClick=""を使用しないでください。document.getElementById('myButtonClick').addEventListener("click",calculateFactory);を使用してください。