document.getElementById возвращает значение null с использованием переменной для передачи идентификатора для функции onclick

У меня есть два поиска файла JSON, выводя результаты на двух отдельных частях страницы в двух отдельных div. Результаты создаются для циклов, и многие скрытые divs создаются в каждом из двух div div результатов, которые отображаются onclick. Идентификатор id в div # 1 равен «a» + i, где i является счетчиком циклов. Div # 2 похож на скрытый идентификатор «aa» + i. Не должно быть дубликатов идентификаторов. Document.getElementById в функции unhyde() равно нулю, если я прохожу скрытый идентификатор Div, чтобы отобразить его как таким образом:document.getElementById возвращает значение null с использованием переменной для передачи идентификатора для функции onclick

function allWriter() { 
    var i = "2"; // to simulate one for loop iteration 
    var theid = "a"+i; 
    var out = '<div onclick="unhyde('+theid+')">John Smith</div>'; 
    out +='<div id="'+theid+'\" style="display: none;">Read This</div>'; 
    document.getElementById('b').innerHTML = out; 
} 

function unhyde (theid) { 
    document.getElementById(theid).style.display="block"; 

<body> 
<div onclick="allWriter()">start</div> 
<div id="b"></div> 
</body>

Почему? Но следующие работы, но «а» или «аа» должны быть зашиты в функции unhyde(), и я не хочу, чтобы:

function allWriter() { 
    var i = "2"; // to simulate one for loop iteration 
    var out = '<div onclick=\"unhyde('+i+')">John Smith</div>'; 
    out +='<div id="a'+i+'" style="display: none;">Read This</div>'; 
    document.getElementById('b').innerHTML = out; 
} 

function unhyde (i) { 
    document.getElementById('a'+i).style.display="block"; 
} 

<body> 
<div onclick="allWriter()">start</div> 
<div id="b"></div> 
</body>

Как я могу это сделать, передав весь идентификатор, как переменную и использовать ту же функцию unhyde(), независимо от идентификатора? И почему разница в этих двух примерах? Я бы предпочел не использовать JQuery, но только если нет другого пути.

источник

2015-05-02 DavidRJ

Если вы посмотрите на сгенерированный код, вы увидите, что он генерирует 'unhyde (a2)', где вы действительно хотите 'unhyde (« a2 »)'. –

Если посмотреть на сгенерированный код для первого примера, вы видите, что он генерирует

onlick="unhyde(a2)"

Т.е. он пытается передать переменную a2 функции. По совпадению, он существует. Он относится к элементу DOM с идентификатором a2. Однако, поскольку значение уже равно Элемент DOM, вы не можете передать его document.getElementById, getElementById ожидает строку.

Проблема не существует во втором случае, поскольку генерируемый код unhyde(2), то есть вы передаете номер 2 функции и "a" + 2 приведет к строки"a2", который getElementById счастливо принимает.

Чтобы исправить первый пример вы просто должны добавить кавычки, так что вы передаете строку вместо (unhyde("a2")):

var out = '<div onclick="unhyde(\''+theid+'\')">John Smith</div>';

Это действительно отличный пример, почему динамически создавать HTML не очень хорошо подход. Более чистым решением будет создание элементов DOM и непосредственное связывание обработчика событий.

источник

2015-05-02 19:10:44

document.getElementById возвращает значение null с использованием переменной для передачи идентификатора для функции onclick

ответ

Смежные вопросы