將DOM innerHTML值與對象屬性進行比較

Question

var metric ={ 
         temp: data.main.temp, 
         celsius: "℃", 
         fahr: "℉", 
         toCelsius: function(){ 
         var convert = this.temp- 273.15; 
          return Math.ceil(convert) + this.celsius; 
        }, 
         toFahr: function(){ 
         var convert = (this.temp * 1.8)- 459.67; 
          return Math.ceil(convert) + this.fahr; 
        } 
        } 

<div id="temp"> 
     <h2>Temperature</h2> 
     <p id="tempApp" class="btn btn-default">26&#x2103;</p></div> 

如何比較$（「＃temp」），innerHTML的值和metric.toCelsius值？

我試着運行下面的代碼，但它從來沒有工作。

     var state1 = metric.toCelsius(); 
         var state2 = metric.toFahr(); 
         var div = document.getElementById("tempApp" 
         if(div.innerHTML == state1){ 
          console.log("yes") 
         } 
         else{ 
          alert("error") 
         } 

Answer 1

的問題是，innerHTML的會轉的HTML實體代碼實際攝氏度符號。因此，在比較之前將字符串轉換爲數字（通過parseFloat）可能更容易。

更好的選擇是在比較之前將HTML實體轉換爲字符串。

這裏有兩個選項：

    // I hard-coded `temp` for this example 
 
        var metric = { 
 
         temp: 300, 
 
         celsius: "℃", 
 
         fahr: "℉", 
 
         toCelsius: function(){ 
 
          var convert = this.temp - 273.15; 
 
          return Math.ceil(convert); 
 
         }, 
 
         toFahr: function(){ 
 
          var convert = (this.temp * 1.8) - 459.67; 
 
          return Math.ceil(convert); 
 
        } 
 
        }; 
 
    
 
        var div = document.getElementById('tempApp'); 
 
        console.log('See the innerHTML: ', div.innerHTML); 
 

 
        // Option 1: parse the text and hope for the best 
 
        var temp = parseFloat(div.innerHTML); 
 
    
 
        if (temp === metric.toCelsius()) { 
 
         console.log('Matched number!'); 
 
        } else { 
 
         console.log('No match number'); 
 
        } 
 

 
        // Option 2: convert to a string and compare 
 
        var sliced = metric.celsius.slice(3); 
 
        var num = parseInt(sliced, 16); 
 
        var str = String.fromCharCode(num); 
 

 
        if (div.innerHTML === metric.toCelsius() + str) { 
 
         console.log('Matched string!'); 
 
        } else { 
 
         console.log('No match string'); 
 
        }

<div id="temp"> 
 
     <h2>Temperature</h2> 
 
     <p id="tempApp" class="btn btn-default">27&#x2103;</p> 
 
</div>