Добавление текста в вывод в HTML JavaScript
Мне нужен вывод этого сайта: https://tew-hop-2-1.glitch.me/
var celsius = "degrees, Celsius";
function convert() {
var degF= document.getElementById("fValue").value
var degC= (degF - 32) * (5 / 9);
document.getElementById("cValue").innerHTML = degC.toFixed(1);
}
document.getElementById("button").addEventListener("click", convert, false);
это то, что у меня есть для кода, но я не могу понять, как изменить его, чтобы получить такой результат.
Я получаю тот же результат, что и на прилагаемом фото! @ScottMarcus и мне тоже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в вашей функции convert. Вы устанавливаете innerHTML как значение degC, а не градусы и вашу строку. Попробуйте вместо этого.
var celsius = "degrees, Celsius";
function convert() {
var degF= document.getElementById("fValue").value
var degC= (degF - 32) * (5 / 9);
document.getElementById("cValue").textContent = degC.toFixed(1) + celsius;
}
document.getElementById("button").addEventListener("click", convert, false);
И как насчет того, чтобы вообще не использовать .innerHTML, если ваша строка действительно не содержит HTML, который необходимо проанализировать? Вместо этого используйте .textContent.
Спасибо за ваш комментарий. Я не знал, что лучше использовать .textContent, и соответственно обновил свой ответ.
Я в основном являюсь разработчиком back-end / fullstack и поэтому стараюсь по возможности избегать использования innerHTML в качестве меры безопасности для предотвращения любых инъекций HTML или javascript. Риск этого меньше в only-javascript, но фигура всегда склоняется к наиболее безопасному способу что-то сделать. Что в этом случае также, вероятно, имеет незначительные преимущества в производительности, не вызывая столько кода синтаксического анализа / обновления DOM.
@Thymine На самом деле, преимущества в производительности можно измерить.
Вы должны включить свой HTML и CSS, чтобы мы могли лучше отлаживать.