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。一般來說，不要將變量命名爲variableX，因爲它告訴我們什麼都沒有（我們知道它是一個變量！）。另外，我會考慮使用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(); 
​