将DOM innerHTML值与object属性进行比较

时间:2017-06-02 01:24:39

标签: javascript object comparison

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")
                         }

1 个答案:

答案 0 :(得分:0)

问题是innerHTML会将HTML实体代码转换为实际的摄氏符号。因此,在比较之前将字符串转换为数字(通过parseFloat)可能更容易。

更好的选择是在比较之前将HTML实体转换为字符串。

以下是两个选项:

&#13;
&#13;
                  // I hard-coded `temp` for this example
                  var metric = {
                      temp: 300,
                      celsius: "&#x2103;",
                      fahr: "&#x2109;",
                      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');
                  }
&#13;
<div id="temp">
        <h2>Temperature</h2>
        <p id="tempApp" class="btn btn-default">27&#x2103;</p>
</div>
&#13;
&#13;
&#13;