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

ソリューションは

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(); 
​