javascript - 函数或循环不工作

标签 javascript arrays loops object

所以这两种方法都有问题。方法(this.howMuch)应该计算给定汽车行驶的距离(基于速度和时间输入)。方法 (this.printAll) 应该打印有关数组中对象的所有信息。我看到的唯一错误是“carConstruct.howMuch 不是 HTMLButtonElement 的函数”。如果我删除第一个方法,第二种方法也会出现同样的错误。

感谢所有帮助。代码如下:

var vardas = document.getElementById("name");
var laikas = document.getElementById("time");
var greitis = document.getElementById("speed");
var driver = document.getElementById("driver");
var addCar = document.getElementById("addCar");
var race = document.getElementById("race");
var box = document.getElementById("box");
var cars = [];

function carConstruct(name, time, speed, driver, distance){
    this.name = name;
    this.time = time;
    this.speed = speed;
    this.driver = driver;
    this.distance = 0;
    this.howMuch = function(){
        for(var i=0; i<cars[i]["time"]; i++){
            this.distance = this.distance + (cars[i]["speed"] * cars[i]["time"]);
        }
    }
    this.printAll = function(){
        for(var i=0; i<cars.length; i++){
        console.log(cars[i]["name"]);
        console.log(cars[i]["speed"]);
        console.log(cars[i]["driver"]);
        console.log(cars[i]["distance"]);
        }
    }
}

addCar.addEventListener("click", function(){
    var carNew = new carConstruct(vardas.value, laikas.value, greitis.value, driver.value);
    cars.push(carNew);
    vardas.value = "";
    greitis.value = "";
    driver.value = "";
});

race.addEventListener("click", function(){
    carConstruct.howMuch();
    carConstruct.printAll();
});
<!doctype html>
<html>
    <head>
        <title>J21ND</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="J21ND.css">
    </head>
    <body>
        <div class="fields">
            <h1>Car Race</h1>
            <input id="name" type="text" placeholder="Input car name">
            <input id="time" type="number" placeholder="Input car time">
            <input id="speed" type="number" placeholder="Input car speed">
            <input id="driver" type="text" placeholder="Input driver level, select: Rookie or Pro">
        </div>
        <div class="buttons">
            <button id="addCar">Add Car</button>
            <button id="race">Start Race</button>
        </div>
        <div id="box">
        </div>
        <script src="J21ND.js"></script>
    </body>
</html>

最佳答案

您只需添加一个全局标志即可做到这一点。这是定制的代码。

// Above code will remain same in js and HTML code will remain same as well
    var flag =0;    
    addCar.addEventListener("click", function(){
            var carNew = new carConstruct(vardas.value, laikas.value, greitis.value, driver.value);
            cars.push(carNew);
            flag=1;
            vardas.value = "";
            greitis.value = "";
            driver.value = "";
        });

        race.addEventListener("click", function(){
            if(flag!=0){
               var addedCar = cars.pop()
               addedCar.howMuch();
               addedCar.printAll();
               flag =0;
            }else{
               alert('Please Add Car First');
               flag =0;
            }
        });

关于javascript - 函数或循环不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41212350/

相关文章:

javascript - 将 codeceptJS 与 PhpStorm 结合使用

javascript - 如何从引导表的新行向 TD/TR 添加属性?

javascript - 如何在俄罗斯方 block 中分别在图案的每个矩形上设置图像

c++ - 在 C 二维数组中找到一个值的多个索引

php - [1]+[2] != [1,2](数组联合运算符在非关联数组上的行为)

loops - 循环后 Fortran DO 循环索引的值

javascript - 使用 Javascript 查找二维数组中数字最大的数组

Java:如何将 HashMap<String, Object> 转换为数组

c - 另一个计数器给一个计数器赋值,防止计数器递增?

java - 在java中,可以在不使用数组的情况下在另一个方法的循环中调用/调用一个方法吗?