getElementById и пропустить, если ноль - PullRequest
0 голосов
/ 26 июня 2018

Когда он возвращает ноль, он не запускает следующий getElementById. Каков наилучший способ структурировать это? Будет 12 возможных getElementById, но страница может иметь только 2 - 4

document.getElementById("routeTwoName").textContent = "Tim";
document.getElementById("routeThreeName").textContent = "David";
document.getElementById("routeFourName").textContent = "Ricky";
document.getElementById("routeTenName").textContent = "Ric";
<div class="panel-body">
  <h4><span id="routeTwoName">Name</span></h4>
</div>

<div class="panel-body">
  <h4><span id="routeTenName">Name</span></h4>
</div>

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Итак, установите переменную и посмотрите, существует ли она.

var x = document.getElementById("foo");
if (x) {
    x.textContent = "bar"
}
0 голосов
/ 26 июня 2018

В общем, когда у вас есть такая повторяющаяся логика, вы инкапсулируете логику в функцию:

function setText(id, text) {
    var element = document.getElementById(id);
    if (element) {
        element.textContent = text;
    }
    return element;
}

тогда вы можете сделать это:

setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");

Вот обновленная версия фрагмента из вопроса:

function setText(id, text) {
    var element = document.getElementById(id);
    if (element) {
        element.textContent = text;
    }
    return element;
}
setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");
<div class="panel-body">
  <h4><span id="routeTwoName">Name</span></h4>
</div>

<div class="panel-body">
  <h4><span id="routeTenName">Name</span></h4>
</div>

Другим вариантом является предоставление себе основанных на множестве функций манипулирования DOM (например, API jQuery, но без использования jQuery [если, конечно, вы не хотите, конечно, он уже написан и протестирован]) чем основанные на элементах такие, как DOM. Мой ответ здесь содержит пример начала по этому пути.

...