Получить температуру getElementsByClassName конвертировать в цельном случае заменить исходную температуру

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, поэтому вам нужно перевернуть их, чтобы установить новую температуру для всех из них.

Вы можете передать коллекцию элементов в функцию и перебрать их через них.

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

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

Если у вас есть различные преобразования, чтобы сделать, вы можете передать, что в качестве аргумента, а или переименовать функцию.