参照: greenerによって提供される上記のjsフィドル。
新しい入力ボタンがクリックされた場合、その新しく追加されたオブジェクトのレイアウトの問題があります。
テキストボックスのスタイルは次のとおりです。
file.setAttribute("style", "margin-top: 60px;");
ただし、テキストボックスを下部ではなく中央に配置する必要があります。自分で試してみましたが、うまくいきません。誰かが私がこの問題を解決するのを手伝ってくれるでしょうか?
参照: greenerによって提供される上記のjsフィドル。
新しい入力ボタンがクリックされた場合、その新しく追加されたオブジェクトのレイアウトの問題があります。
テキストボックスのスタイルは次のとおりです。
file.setAttribute("style", "margin-top: 60px;");
ただし、テキストボックスを下部ではなく中央に配置する必要があります。自分で試してみましたが、うまくいきません。誰かが私がこの問題を解決するのを手伝ってくれるでしょうか?
最初の行は入力フィールドのラッパーdiv
を使用し、style 属性には が含まれていますfloat: right
。生成された行 (「新しいエントリを追加」ボタンをクリックした後) には、入力の周りに同じ属性を持つ div ラッパーがありません。
あなたのコードは読むのが非常に複雑なので、これが役立つかもしれません:
HTML:
<form name="addpoll">
<div id="choices">
</div>
<input id="addchoice" type="button" value="Add New Entry">
</form>
JS:
function addnewDiv(counterAppended) {
counterAppended = parseInt(counterAppended) + 1;
var text = document.createElement("div");
text.innerHTML = '<input type="hidden" class="choicecount" name="choicecount" id="choicecount" value="' + counterAppended + '">\
<input type="file" name="choiceimg' + counterAppended + '" value ="Select" onchange="readURL(this)" style="display:none;">\
<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="choicename' + counterAppended + '" id="firstremove2">\
<input type="button" value="Remove" class="remove" id="firstremove3" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">\
</div>\
</div>\
<img src="#" name="viewimg' + counterAppended + '" class="addmultiple" id="viewimg' + counterAppended + '" height="70px" width="85px" style="display:none"/>\
<br>\
</div>\
<span id="file"></span>';
text.id = 'choice' + counterAppended;
document.getElementById("choices").appendChild(text);
document.getElementsByClassName("remove")[document.getElementsByClassName("remove").length - 1].addEventListener("click", function() {
this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);
});
}
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();
}
document.getElementById("addchoice").addEventListener("click", function() {
var choicecounts = document.getElementsByClassName('choicecount');
addnewDiv(choicecounts[choicecounts.length - 1].value);
});
addnewDiv(0);
JsFiddle: http://jsfiddle.net/99vhF/1/
間違ったノードに要素を追加します。「追加」部分を見直します。すべての変数は「ファイル」要素を取ります。奇妙に見えます:
var addfile = 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");