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

您需要使用innerHTML而不是innerhtml並將腳本放入<script></script>

示例： onclick事件

Answer 3

calculate功能正在執行。 相反，問題出在以下行中：

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

設置元素的HTML值時，需要使用innerHTML 。 注意大寫。

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

改變它，你就很黃金。

Answer 4

我記得剛接觸JavaScript時。 哦！ 媽媽咪呀！ 在這里，我將為您提供一個示例，如果您能理解這個想法，那么您將找到正確的方法。 別害怕，它非常簡單，但是它將帶給您關於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); 。