Question

温度从xml中提取。我需要在页面加载后转换此数字并替换原始数字。

<td class="weathertemperature temperatureplus">26</td>

function convert() {
      F = document.getElementsByClassName("weathertemperature").value * 9 / 5 + 32;
    document.getElementsByClassName("weathertemperature").value = Math.round(F);

}
convert();

当我调试警报（F）时;我得到了NaN

Answer 1

getElementsByClassName返回必须通过索引访问的元素集合，就像使用数组一样。

因为集合本身没有.value，所以在数学运算中使用它时会得到NaN。

如果您只想要第一个匹配，请使用[0]获取第一个匹配项，或者只使用.querySelector和CSS选择器。

function convert() {
   var wt = document.querySelector(".weathertemperature");
   wt.value = Math.round(wt.value * 9 / 5 + 32);
}
convert();

如果您想要多个操作，请使用像您一样的循环，以及任何其他类似数组的集合。

此外，您在.value元素上使用<td>。不知道为什么。 .value属性主要用于表单控件。您的意思是.textContent吗？

Answer 2

getElementsByClassName返回一个NodeList，因此你必须循环它们以为所有这些设置新的温度。

你可以将元素集合传递给函数并在那里循环它们。

＆＃13;

function convert(items) {
  for (var i = 0, len = items.length; i < len; i++) {
    items[i].innerText = Math.round(items[i].innerText * 9 / 5 + 32);
  }
}

convert(document.getElementsByClassName("weathertemperature"));

＆＃13;

<table>
  <tbody>
    <tr>
      <td class="weathertemperature temperatureplus">26</td>
      <td>27</td>
      <td class="weathertemperature temperatureplus">28</td>
    </tr>
  </tbody>
</table>

＆＃13;

如果您要进行不同的转换，您也可以将其作为参数传递或重命名该函数。

通过getElementsByClassName获取温度转换为摄氏温度替换原始温度

2 个答案: