Question

我是javascript的新手，我正在制作BMI计算器。我在javascript中创建一个类来生成计算。目前用户可以输入他们的身高（英尺和英寸）和体重。当我在班上运行一个方法时。它一直在说this.feet = null而不是从输入中获取值。我的javascript代码如下。 result（）在我的html中提交按钮。

function calculator(feet,inches,weight) { 
    this.feet = feet.value;
    this.inches = inches.value;
    this.weight = weight.value;

    this.validateInput = function() {
        var errors = [];

        if(isNaN(this.feet) || this.feet < 0) {
            errors.push("Feet");
        }
        else {
            return this.feet
        };

        if(isNaN(this.inches) || this.inches < 0 || this.inches > 11) {
            errors.push("Inches")
        }
        else {
            return this.inches;
        };  

        if(isNaN(this.weight) || this.weight < 0) {
            errors.push("Weight");
        }
        else {
            return this.weight
        }
    };

    this.inchesConverter = function() {
        this.feet = parseFloat(feet);
        this.inches = parseFloat(inches);
        return parseInt(this.feet*12+this.inches);
    };

    this.bmi = function() {
        var height = this.inchesConverter();
        var validater = this.validateInput();

        for(r = 0; r < errors.length; r++){
            if(errors.length > 0) {
                return errors[r] + " must be a valid positive number.";
            }
            else {
                parseFloat((validateWeight * 703) / (Math.pow(height, 2))).toFixed(1);
            }
        }
    };      
};


var getWeight = document.getElementById('txtWeight');
var getFeet = document.getElementById('txtHeightFeet');
var getInches = document.getElementById('txtHeightInches');

var test = new calculator(getFeet, getInches, getWeight);
function result() {
    document.getElementById("lblBMI").innerHTML(test.bmi());
}

Answer 1

不要将feet.value分配给this.feet，而是尝试分配feet.getAttribute('value')

如果你使用console.log（feet）它会显示正确的DOM元素吗？

Answer 2

无需使用＆＃34; this。＆＃34;

声明变量

function calculator(paraFeet,paraInches,paraWeight) { 
    var feet = paraFeet.value;
    var inches = paraInches.value;
    var weight = paraWeight.value; 
...

你现在可以删除＆＃34;这个。＆＃34;来自函数内的每个变量

Answer 3

每个浏览器都有JavaScript控制台，您可以在其上调试代码。我有一些乐趣可以在这里或那里修复它，但你也应该自己尝试一下。无论如何它是：

function calculator(weight, feet, inches) {
  this.weight = weight;
  this.feet = feet;
  this.inches = inches;

  this.validateInput = function() {
    var errors = [];

    if (!this.validNumber(this.weight, 1000)) {
      errors.push("Invalid weight.");
    }
    if (!this.validNumber(this.feet, 10)) {
      errors.push("Invalid hight in feet.");
    }

    if (!this.validNumber(this.inches, 11)) {
      errors.push("Invalid hight in inches.")
    }
    return errors;
  };

  this.validNumber = function(num, max) {
    if (num.length > 0 && !isNaN(num)) {
      var number = parseInt(num);
      return number > 0 && number < max + 1;
    }
    return false;
  }

  this.displayErrors = function(errors) {
    var html = "";
    for (error of errors)
      html += error + "<br/>";
    return html;
  };

  this.inchesConverter = function() {
    var feet = parseInt(this.feet);
    var inches = parseInt(this.inches);
    return feet * 12 + inches;
  };

  this.bmi = function() {
    var errors = this.validateInput();
    if (errors.length > 0) {
      return this.displayErrors(errors);
    }
    var height = this.inchesConverter();
    return parseFloat((this.weight * 703) / (Math.pow(height, 2))).toFixed(1);
  };
};

function result() {
  var getWeight = document.getElementById('txtWeight').value;
  var getFeet = document.getElementById('txtHeightFeet').value;
  var getInches = document.getElementById('txtHeightInches').value;
  var test = new calculator(getWeight, getFeet, getInches);
  document.getElementById("lblBMI").innerHTML = test.bmi();
  return false;
}

<span>
  <label>Weight</label>
  <input id="txtWeight">
</span>
<span>
  <label>HeightFeet</label>
  <input id="txtHeightFeet">
</span>
<span>
  <label>HeightInches</label>
  <input id="txtHeightInches">
</span> 
<button id='run' onClick="return result();">Calculate</button>
<div id="lblBMI"></div>

Answer 4

弄清楚我的问题是什么。这个问题来自我的for循环。工作代码发布在下面！

function calculator(feet,inches,weight) { 
    this.feet = feet.value;
    this.inches = inches.value;
    this.weight = weight.value;

    this.validateInput = function() {
        var errors = [];

        if(isNaN(this.feet) || this.feet < 0 || this.feet == "") {
            errors.push("feet");
        };
        if(isNaN(this.inches) || this.inches < 0 || this.inches > 11) {
            errors.push("inches")
        };
        if(isNaN(this.weight) || this.weight < 0 || this.weight == "") {
            errors.push("weight");
        };

        return errors;
        console.log(errors);
    }; 

    this.inchesConverter = function() {
        var parseFeet = parseFloat(this.feet);
        var parseInches = parseFloat(this.inches);
        return parseInt(parseFeet*12+parseInches);
    };

    this.bmi = function() {
        var height = this.inchesConverter();
        var errors = this.validateInput();

        if(errors.length > 0) {
            for(r = 0; r < errors.length; r++){
                return "Please enter a correct number for " + errors[r];
            };

        }

        else {
            return parseFloat((this.weight * 703) / (Math.pow(height, 2))).toFixed(1);
        };
    };  
};

function result(){
    var getWeight = document.getElementById('txtWeight');
    var getFeet = document.getElementById('txtHeightFeet');
    var getInches = document.getElementById('txtHeightInches');

    var test = new calculator(getFeet, getInches, getWeight);
    document.getElementById("lblBMI").innerHTML = test.bmi();
};

在javascript类中获取html输入值

4 个答案: