자바 스크립트 클래스 내에서 html 입력 값 받기

Question

나는 자바 스크립트와 메신저에 BMI 계산기를 처음 사용합니다. 메신저 자바 스크립트에서 계산을 생성하는 클래스를 만들고있어. 현재 사용자는 높이 (피트 및 인치)와 무게를 입력 할 수 있습니다. 내 수업 내에서 메소드를 실행할 때. 입력에서 값을 가져 오는 대신 this.feet = null을 계속 말합니다. 내 자바 스크립트 코드는 아래 있습니다. 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

내 문제가 무엇인지 알아 냈어. 문제는 내 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(); 
}; 

Answer 2

대신 this.feet에 feet.value이 feet.getAttribute('value')

당신이 CONSOLE.LOG 경우 (발)가 올바른 DOM 요소를 보여 않습니다 할당하려고 할당?

Answer 3

"this"를 사용하여 변수를 선언 할 필요가 없습니다.

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

이제 "this"를 제거 할 수 있습니다. 함수 내의 모든 변수의 값

Answer 4

모든 브라우저에는 코드를 디버그 할 수있는 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>