जावास्क्रिप्ट समारोह गतिशील DIV विशेषता div सामग्री

Question

मेरी कोडिंग में मैं गतिशील div और उसके गुण पैदा करने के लिए जावास्क्रिप्ट समारोह में इस्तेमाल किया सहित नहीं है

यहाँ एचटीएमएल

<p >Poll Choice</p> 

<input type=hidden name="choicecount" id="choicecount" value="1"> 

<input type=file name="choiceimg1" value ="Select" onchange="readURL(this)" style="display:none;"> 

    <script language="JavaScript" type="text/javascript"> 

    function HandFileButtonClick() 

    { 

    document.addpoll.choiceimg1.click(); 

    } 

    function HandleFileButtonClick(val)  
    { 
     var ss=val.name; 

     document.forms["addpoll"] 

     var n=ss.split("choiceimgs"); 

     document.forms["addpoll"]["choiceimg" + n[1]].click(); 
    } 

    </script> 

    <div> 
    <div style="width:400px;height:85px;"> 
      <div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;"> 
       <input type="button" onclick="HandFileButtonClick();" value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple"> 
      </div> 
      <div style="float:right;margin-top: 30px;"> 
       <input type=text name="choicename1" id="firstremove2"> 

       <input type="button" value="Remove" id="firstremove3" onclick="document.getElementById('imgbg').style.display='none';document.getElementById('firstremove').style.display='none';document.getElementById('viewimg1').style.display='none';document.getElementById('firstremove2').style.display='none';document.getElementById('firstremove3').style.display='none';" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;"> 
      </div> 
    </div> 
<img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/> 

<br /> 
    </div> 
<span id="file" ></span> 

<input id="addchoice" type=button value="Add New Entry" onclick="addnew(document.forms['addpoll']['choicecount'].value);"> 

जब उपयोगकर्ता क्लिक के लिए अपनी कोडिंग है addnewentry बटन यह एक समारोह addnew (गिनती) कहते हैं। गिनती उपयोगकर्ता द्वारा जोड़े गए विकल्पों में से कोई भी इंगित करती है। यहाँ कि addpoll समारोह के लिए कोडिंग है - जावास्क्रिप्ट

<script> 
    function addnew(type) 
    { 

    type=parseInt(type)+1; 
    var name="choiceimg"+type; 
    var name10="choiceimgs"+type; 
    var name1="choicename"+type; 
    var name2="viewimg"+type; 
    var name3="remover"+type; 
    var name4="br"+type; 
    var mydiv = document.createElement("div"); 
    mydiv.setAttribute("id",imgbg); 
    mydiv.setAttribute("style","width:110px;height:80px;float:left;text-align:center;border:1px solid #ccc;"); 
    var text = document.createElement("input"); 
    text.setAttribute("id", name10); 
    text.setAttribute("type", "button"); 
    text.setAttribute("class", "addmultiple"); 
    text.setAttribute("style", "width: 190px"); 
    text.setAttribute("style", "padding-left: 5px;&nbsp;"); 
    text.setAttribute("value", "Browse"); 
    text.setAttribute("onclick", "HandleFileButtonClick(this)"); 
    text.setAttribute("name", name10); 
    var textf = document.createElement("input"); 
    textf.setAttribute("type", "file"); 
    textf.setAttribute("class", "addmultiple"); 
    textf.setAttribute("style", "width: 246px"); 
    textf.setAttribute("style", "display:none;"); 
    textf.setAttribute("name", name); 
    textf.setAttribute("onChange", "readURL(this)"); 
    var file = document.createElement("input"); 
    file.setAttribute("type", "text"); 
    file.setAttribute("name", name1); 
    file.setAttribute("style", "margin-top: 60px;"); 
    var viewimg = document.createElement("img"); 
    viewimg.setAttribute("src", "#"); 
    viewimg.setAttribute("id", name2); 
    viewimg.setAttribute("width", "85px"); 
    viewimg.setAttribute("height", "70px"); 
    viewimg.setAttribute("name", name2); 
    viewimg.setAttribute("style", "display:none"); 
    viewimg.setAttribute("class", "addmultiple"); 
    var remove = document.createElement("input"); 
    remove.setAttribute("type", "button"); 
    remove.setAttribute("value", "Remove"); 
    remove.setAttribute("style", "color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;"); 
    remove.setAttribute("name", name3); 
    remove.setAttribute("onclick", "remove(this)"); 
    var br1 = document.createElement("br"); 
    br1.setAttribute("id", name4); 
    document.forms['addpoll']['choicecount'].value=type; 
    var addfile = document.getElementById("file"); 
    var addtext = document.getElementById("file"); 
    var view = document.getElementById("file"); 
    var remove1 = document.getElementById("file"); 
    var br2 = document.getElementById("file"); 
    var textf1 = document.getElementById("file"); 
    var myimgdiv = document.getElementById("file"); 
    myimgdiv.appendChild(mydiv); 
    addtext.appendChild(text); 
    addfile.appendChild(file); 
    remove1.appendChild(remove); 
    view.appendChild(viewimg); 
    br2.appendChild(br1); 
    textf1.appendChild(textf); 

    } 

    </script> 

क्या मैं यहाँ बदलना चाहते है,

mydiv फाइल करने के लिए appendding किया जाता है, यह अलग रूप में div और अलग रूप में छवि लेता है।

उपरोक्त छवि में ब्राउज़ बटन के साथ बॉक्स, choicename के लिए पाठ बॉक्स सहित पहला सेट और बटन को निकालने के रूप में कोडिंग से कर रहे हैं। नीचे दिए गए तीन सेट addnew फ़ंक्शन द्वारा गतिशील रूप से जोड़े गए हैं। लेकिन बॉक्स में इसके अंदर ब्राउज बटन शामिल नहीं है। और मैं भी वही शैली चाहता हूं जो पहले div के रूप में है। लेकिन जब मैं पूरे दिन के लिए समय बिताने के बाद मैं गतिशील divs को पहले div के समान बदल नहीं सकता। कोई भी इस समस्या को हल करने में मेरी मदद कर सकता है। पढ़ने और मुझे इस

Answer 1

चीजों के एक नंबर अपने जावास्क्रिप्ट समारोह में परिवर्तित करने की आवश्यकता solvet करने के लिए मदद के लिए धन्यवाद:

संदर्भित,

mydiv.setAttribute("id",imgbg) 

imgbg कुछ भी नहीं करने के लिए संदर्भित करता है तो इसके स्थान पर कोई नया बनाने अद्वितीय चर

var name5="imgbg"+type 
mydiv.setAttribute("id",name5) 

जब आप बटन को जोड़ना चाहते हैं तो यह बाद में इस विशेष div को संदर्भित करने की अनुमति देगा।

स्टाइलिंग, इसलिए की तरह एक साथ अपने सभी शैलियों डाल:

text.setAttribute("style", "padding-left: 5px;margin-top: 30px;"); 

अनुक्रमण के बाद ही आप युक्त div संलग्न है, तो आप इसे करने के लिए बटन जोड़ सकते हैं:

var myimgdiv = document.getElementById("file"); 
myimgdiv.appendChild(mydiv); 
var addtext = document.getElementById(name5); 
addtext.appendChild(text); 

त्वरित उदाहरण: http://jsfiddle.net/3Sd4W/