Javascript函数动态DIV属性不包括div内容 [英] Javascript function dynamic DIV attribute is not including the div content
问题描述
在我的编码中，我使用javascript函数动态创建div及其属性
In my coding I used javascript function for dynamically creating the div and its attributes
这是我对html的编码
Here is my coding for html
<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（count）函数。计数表示用户添加的选项号。以下是该addpoll函数的编码 - javascript
When the user clicks the addnewentry button it calls an function addnew(count). The count indicates the no of choices that is added by the user. Here is the coding for that addpoll function - javascript
<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; ");
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附加到文件时，它将div作为单独的，图像作为单独的。
When the mydiv is appendding to the file, It takes the div as separate and the image as separate.
在上图中第一组包括带有浏览按钮的文本框，文本选择框和删除按钮来自表单内的编码。以下三组由addnew函数动态添加。但该框不包括其中的浏览按钮。而且我想要与第一个div相同的风格。但是在我花了一整天的时间后，我不能像第一个div那样改变动态div。任何人都可以帮我解决这个问题。感谢您阅读并帮助我解决此问题
In the above image the first set including the box with browse button, text box for choicename and remove button are from coding within the form. The below three sets are added dynamically by the addnew function. But the box is not including the browse button within it. and also i want the same style as the first div. But after i spending time for a full day i cant change the dynamic divs as the same as first div. Anybody could help me for solve this problem. Thanks for reading and helping me to solvet this
推荐答案
您的javascript函数需要更改许多内容：
A number of things need to be changed in your javascript function:
引用，
mydiv.setAttribute("id",imgbg)
imgbg 指的是没有，所以改为创建一个新的唯一变量
imgbg refers to nothing so instead create a new unique variable
var name5="imgbg"+type
mydiv.setAttribute("id",name5)
这将允许稍后引用此特定div如果你想追加按钮。
This will allow to refer to this particular div later when you want to append the button.
样式，把你所有的风格放在一起如下：
Styling, put all your styles together like so:
text.setAttribute("style", "padding-left: 5px;margin-top: 30px;");
排序，仅在您追加包含<$ c $后c> div ，你可以将按钮附加到它：
Sequencing, only after you've appended the containing div, you can append the button to it:
var myimgdiv = document.getElementById("file");
myimgdiv.appendChild(mydiv);
var addtext = document.getElementById(name5);
addtext.appendChild(text);
快速示例： http://jsfiddle.net/3Sd4W/
这篇关于Javascript函数动态DIV属性不包括div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
