Question

我是JavaScript的新手，可以看到此代码没有任何问题。它应该计算物品的数量。我怎样才能让它发挥作用？

（我查看过很多类似帖子的帖子，但无法解决问题。）

＆＃13;

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 = '&euro;' + total;

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这一行有拼写错误，innerHTML而不是innerhtml：

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

应该是：

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

Answer 2

您需要使用innerHTML代替innerhtml并将您的脚本放在<script></script>

中

示例：onclick event

Answer 3

正在执行import re teststring = "aaxxYYxxaa" word = re.findall (r".{0,2}YY.{0,2}", teststring) print(word) # => ['xxYYxx']功能。问题在于以下几行：

calculate

设置元素的HTML值时，需要使用document.getElementById('output').innerhtml = '€' + total;。注意大写。

innerHTML

改变这一点，你就是金色的。

Answer 4

我记得当我刚开始使用javascript时。 Oohh！妈妈咪呀！在这里，我将为您提供一个示例，如果您能理解这个想法，那么您将获得正确的方法。不要害怕，它很简单，但它会让你知道如何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);。

JavaScript onclick函数不会执行

4 个答案: