在已创建的division元素中编写脚本

Question

function addkid() {
  if (i <= 2) {
    i++;
    var div = document.createElement('div');
    div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn">Upload</span>'+'</label>'+'  <input type="button" value="-" onclick="removekid(this)">';
    document.getElementById('kids').appendChild(div);

  }

这是我用来在单击"+“时添加文件上传选项的javascript函数。

<div id="kids">

<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />


<label class="fileUpload">
    <input id="uploadBtn" type="file" class="upload" name=Image1 />
    <span class="uploadBtn">Upload</span>
</label>



        <input type="button" id="add_kid()" onclick="addkid()" value="+" />(MAX 3)

      </div></td></tr>


                        </div>

            <script>
                 document.getElementById("uploadBtn").onchange = function  {
    document.getElementById("uploadFile").value = this.value;
};

            </script>

这是用来创建第一个文件上传选项的html代码！代码内部的函数是用来显示上传文件的文件路径的！虽然第一个javascript代码( addkid()函数)可以用来创建更多的文件上传选项，但它无法显示已上传文件的文件路径，因为我无法调用第一个代码中的addkid()函数的脚本标记内的函数！如何调用脚本标记内的函数来调用addkid()函数？

​

虽然文件已上载到第二个文件上载选项，但它不会显示，因为

<script>
                     document.getElementById("uploadBtn").onchange = function  {
        document.getElementById("uploadFile").value = this.value;
    };

                </script>

未调用此函数

Answer 1

这里有两个问题：

1)不同的upload按钮有相同的ID，这么多层次都是错的。你应该让他们的ids是唯一的。要实现这一点，您可以这样做：

div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile-' + i + '" class="disableInputField" and etc... 

这样，每个upload按钮都将具有与模式uploadFile-N匹配的id，其中N -是upload按钮的索引。

这也与上传和删除按钮配合使用。您也应该让它们具有唯一的ids。

2) HTML脚本中的代码不会触发，因为您不能在尚不存在的元素上绑定事件。您所要做的就是将您的代码document.getElementById("uploadBtn").onchange ... and etc移到您的第一个javascript代码示例的这一部分：

function addkid() {
    if (i <= 2) {
        i++;
        var div = document.createElement('div');
        div.innerHTML = '<br> Prescription '+i+':<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="another-uploadBtn-' + i + '">Upload</span>'+'</label>'+'  <input type="button" value="-" onclick="removekid(this)">';
        document.getElementById('kids').appendChild(div);
        //TODO here I inserted your code that binds onchange event
        document.getElementById("uploadBtn-" + i).onchange = function  {
            document.getElementById("uploadFile-"+i).value = this.value;
        };
    }
}