Nano Hash - криптовалюты, майнинг, программирование

Ошибка JavaScript getElementById с нулевыми значениями и как ее избежать

Я создал форму, в которой пользователь вводит минимальное и максимальное количество текстовых областей, которые можно добавить на страницу. Он генерирует код ниже, чтобы подобрать его с помощью JScript:

$minimum .= '<div id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div id="H'.$i.'">'.$max[$i].'</div>';

В JScript я определил цикл, который будет перехватывать вышеуказанные теги div и их innerHTML как числа и помещать их в массив.

var mincount = [];
var maxcount = [];
for(var k=1; k<101; k++) {
    mincount[k] = parseInt(document.getElementById("K"+k).innerHTML, 10);
    maxcount[k] = parseInt(document.getElementById("H"+k).innerHTML, 10);
}

k определяется как до 100. Итак, я знаю, что это проблема, потому что тогда, если текстовых полей меньше 100, getElementById имеет нулевые значения.

Таким образом, выдается ошибка: Uncaught TypeError: Cannot read property 'innerHTML' of null

Но он должен быть определен до 100. Итак, есть ли какой-либо вариант, который может работать примерно так:

if(mincount[k] == null) {mincount[k] = ""} // in order to avoid null values.

Это не работает. Он все еще получает ошибку.

13.04.2014

  • Более простым решением было бы присвоить этим элементам один и тот же класс, а затем просто выбрать все элементы с этим классом. Я не вижу причин, по которым каждый элемент должен иметь свой идентификатор. 13.04.2014
  • ... или просто выведите массивы PHP $min и $max непосредственно в атрибут данных или даже в переменную javascript. 13.04.2014
  • Потому что он должен быть напечатан в html поэлементно с разными css. И это с классом, я не думаю, что должно решить проблему, которая у меня есть :( 13.04.2014
  • Там также используется атрибут имени. document.getElementsByName вернет массив в порядке DOM сверху вниз. 13.04.2014
  • Проблема в том, что, например, $min равно 3. Затем у меня есть цикл, который будет выполняться 3 раза, и, например, если второй индекс в массиве не определен (потому что не все индексы заполнены этим кодом), я снова получил нуль :( 13.04.2014
  • с классом, я не думаю, что это должно решить мою проблему Это предотвратит попытки доступа к несуществующим элементам. 13.04.2014
  • Ага. Вы как всегда правы :) 13.04.2014

Ответы:


1

Более простым решением было бы присвоить этим элементам один и тот же класс, а затем просто выбрать все элементы с этим классом. Я не вижу причин, по которым каждый элемент должен иметь свой идентификатор.

$minimum .= '<div class="K">'.$min[$i].'</div>';
$maximum .= '<div class="H">'.$max[$i].'</div>';

Затем вы делаете в JavaScript:

var mincount = [];
var minelements = document.querySelectorAll('.K');
for (var i = 0, l = minelements.length; i < l; i++) {
    mincount.push(parseInt(minelement[i].innerHTML, 10));
    // if the content is purely numeric, unary plus is simpler:
    // mincount.push(+minelement[i].innerHTML);
}

То же, что и maxcount.

Или, как предложил @adeneo, если ваш код JavaScript также обслуживается через PHP и у вас есть доступ к массиву $min, просто выполните

var mincount = <?php echo json_encode($min); ?>;

Тогда вы даже не знаете, как прикоснуться к DOM.

13.04.2014

2

Самый простой способ проверки нулевых значений — это простая проверка на равенство.

...
...
for(var k=1; k<101; k++) {
    var K_el = document.getElementById("K"+k);
    var H_el = document.getElementById("H"+k);
    if ( K_el != null && H_el != null ) {
        mincount[k] = parseInt(K_el.innerHTML, 10);
        maxcount[k] = parseInt(H_el.innerHTML, 10);
    }
}

Если эти значения не могут быть изменены пользователем, было бы проще вычислить минимальное и максимальное значение в PHP.

13.04.2014

3

Предпочтительное решение — просто поместить общий класс для каждого элемента заданного типа и запросить элементы, которые действительно существуют:

$minimum .= '<div class="K" id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div class="H" id="H'.$i.'">'.$max[$i].'</div>';

var mincount = [];
var maxcount = [];
var kItems = document.querySelectorAll(".K");
var hItems = document.querySelectorAll(".H");
for (var i = 0, len = Math.min(kItems.length, hItems.length); i < len; i++) {
    mincount[i] = parseInt(kItems[i].innerHTML, 10);
    maxcount[i] = parseInt(hItems[i].innerHTML, 10);

}

Не меняя HTML и придерживаясь вашего текущего подхода к коду, вы можете просто проверить, существует ли элемент, прежде чем пытаться его использовать.:

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (objK) {
        mincount[k] = parseInt(objK.innerHTML, 10);
    }
    if (objH) {
        maxcount[k] = parseInt(objH.innerHTML, 10);
    }
}

Или, если вы знаете, что как только один объект не существует, вы должны выйти из цикла for, вы можете сделать это:

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (!objK || !objH) {
        break;
    }
    mincount[k] = parseInt(objK.innerHTML, 10);
    maxcount[k] = parseInt(objH.innerHTML, 10);
}
13.04.2014
Новые материалы

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

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

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