javascript htcontents не отображается в html правильно

Question

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

var var1=1; 
     function addAffiliation(){ 
        var newArea = addNew(); 
        var htcontents ="<input placeholder='categories..' 
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 
         + "<br/><br/>"; 
        document.getElementById(newArea).innerHTML = htcontents;    
       } 
     function addNew() { 
        var1=var1+1;  
        var var2 = document.getElementById('area'); 
        var newdiv = document.createElement('div'); 
        var divIDName = 'Div #'+ var1; 
        newdiv.setAttribute('id',divIDName); 
        ni.appendChild(newdiv); 
        return divIDName; 
       } 

но при добавлении дополнительного поля вместо;

<input placeholder="categories.." 
    class="input_box" type="textbox" name="categories[]" 
    onchange="display(this, 'field2', 'field3', 'field4');"/> 

это создается (двойные кавычки местоположение неправильно)

<input placeholder="categories.." 
     class="input_box' type="textbox" name="categories[]" 
     onchange="display(this, "field2', 'field3', 'field4');'/> 

и из-за этой проблемы, field2-3-4 не видно ..

что делать?

здесь функция отображения

function display(obj,id1,id2,id3) { 
    txt = obj.options[obj.selectedIndex].value; 
    document.getElementById(id1).style.display = 'none'; 
    document.getElementById(id2).style.display = 'none'; 
    document.getElementById(id3).style.display = 'none'; 
    if (txt.match(id1)) { 
     document.getElementById(id1).style.display = 'block'; 
    } 
    if (txt.match(id2)) { 
     document.getElementById(id2).style.display = 'block'; 
    } 
    if (txt.match(id3)) { 
     document.getElementById(id3).style.display = 'block'; 
    } 
} 

@Aram,

Я хочу иметь выпадающее меню;

<option name="first">selection 1</option> 
<option name="second">selection 2</option> 

если пользователь выбирает выбор 1;

field1:< input name="field1".....> 
field2:< input name="field2".....> 

если пользователь выбирает выбор 1;

field3:< input name="field3".....> 
field4:< input name="field4".....> 
field5:< input name="field5".....> 

, когда пользователь заканчивает заполнение ящиков, он может захотеть добавить больше;

addReference(); 

затем снова он видит,

<option name="first">selection 1</option> 
    <option name="second">selection 2</option> 

и так далее .. что теперь ясно?

Answer 1

решение очень близко подошли к тому, что предложил ManseUK,

var htcontents ="<input placeholder='categories..' 
class='input_box' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 

должен быть

var htcontents ="<input placeholder=\'categories..\' //notice slashes 
class=\'input_box\' name=\'categories[]\' //notice slashes 
onchange=\'display(this, \'field2\', \'field3\', \'field4\');\'/>" //notice slashes 

надежда, что поможет кому ..

Answer 2

Изменить

var htcontents ="<input placeholder='categories..' 
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 

в

var htcontents ="<input placeholder=\"categories..\" 
class=\"input_box\" type=\"textbox\" name=\"categories[]\" 
onchange=\"display(this, 'field2', 'field3', 'field4');\"/>" 

т.е. избежать двойные кавычки в строке.

Answer 3

Я не был уверен, что вы там сделали, потому что были синтаксические ошибки в addAffiliation рядом с строкой. Вы должны использовать одинарные кавычки для всей строки, двойные кавычки для значений атрибутов и использовать +, чтобы объединить переменные js там, где это необходимо. Вы должны избегать любых кавычек, которые совпадают с строками, определенными с помощью \.

Кроме того, я думаю, ni должен читать var2. В общем, никогда не называйте переменную переменнойX, потому что она ничего нам не говорит (мы знаем, что это переменная!). Кроме того, я бы рассмотрел использование jQuery для просто взаимодействия с элементами.

См. http://jsfiddle.net/ntCGc/.

var var1=1; 
function addAffiliation(){ 
    var newArea = addNew(); 
    var htcontents ='<input placeholder="categories.." class="input_box" type="textbox" name="categories" onchange="javascript:display(this, \'field2\', \'field3\', \'field4\');"/><br/><br/>'; 
    document.getElementById(newArea).innerHTML = htcontents;    
} 
function addNew() { 
    var1=var1+1;  
    var var2 = document.getElementById('area'); 
    var newdiv = document.createElement('div'); 
    var divIDName = 'Div #'+ var1; 
    newdiv.setAttribute('id',divIDName); 
    var2.appendChild(newdiv); 
    return divIDName; 
} 

addAffiliation(); 
​