Обзор

Здравствуйте, все. Я пытаюсь обучиться HTML/CSS/JavaScript и столкнулся с чем-то, что заставляет меня думать, что я неправильно понял один или несколько аспектов назначения и функции атрибутов 'id' в HTML.

В приведенных ниже разделах я описал, чего я пытаюсь добиться, соответствующие разделы моего кода и неожиданный (с моей точки зрения) результат, который я получаю.

Заранее спасибо за то, что поделились своими мыслями и опытом; этот сайт и его сообщество были очень ценны для меня на моем пути кодирования до сих пор.

Что я пытаюсь достичь?

Предназначенная функция
Когда я нажимаю на кнопку, я хочу, чтобы она запускала мою функцию numberChange(), которая преобразует переменную myNumber к двум десятичным знакам и сохраняет их в переменной justTwoDecimals.

Предназначенное отображение
Я хочу, чтобы значение justTwoDecimals отображалось на экране отдельно (т.е. я не хочу, чтобы отображалось более длинное myNumber).

Мой код





    
    








Number With Just Two Decimals
Click the Button

Неожиданный результат

Результат без изменений
Используя приведенный выше код, я нажимаю на кнопку, но текст 'Click the Button' не реагирует и не преобразуется в "5.12", как ожидалось.
Первый результат

Результат с изменениями
Когда я добавляю код в строке 28, значение justTwoDecimals заполняется, как и ожидалось, но, к сожалению, значение myNumber теперь видно, засоряя экран цифрами :)
SecondResult

26. 
27.
28. 

Long Number Value
Click The Button

29.

Number With Just Two Decimals
Click the Button

Мой вопрос

Вероятно, ответ на этот вопрос находится прямо передо мной, но почему значение myNumber должно появляться на экране, чтобы justTwoDecimals отображалось правильно?

Я думал, что функция numberChange() выполняется всегда, независимо от того, появляются ли какие-либо значения на экране.

Спасибо еще раз!

Ответы (1)

Проблема заключается в следующем:

document.getElementById("myNumber").innerHTML=myNumber;

В вашем исходном примере нет элемента с id="myNumber", поэтому вы пытаетесь получить несуществующий элемент, он выдает ошибку и прекращает выполнение функции, следующая строка никогда не выполняется.

Если вы удалите эту строку, то получите ожидаемый результат. Строка выше вычисляет значение, которое вы хотите отобразить, а следующая строка отображает это значение в DOM.

var myNumber = 5.1234567;
var justTwoDecimals = 0;

function numberChange() {
  justTwoDecimals = parseFloat(myNumber).toFixed(2);
  document.getElementById("justTwoDecimals").innerHTML = justTwoDecimals;
}


Число с двумя десятичными знаками

Нажмите кнопку

Пример result with changes выполняется, потому что вы добавляете myNumber в DOM, исключение не возникает, и элемент justTwoDecimals обновляется.

2022 WebDevInsider