Question

我有一个简单的页面，带有文件选择按钮和提交按钮以完成上传。单击提交按钮后，我调用一个JavaScript函数，以在下面显示的“ text_display”类中显示不同的文本（“处理中...。”。

有两种方法可以调用此JavaScript函数。我可以在提交按钮的代码中使用onClick命令来调用它，也可以包含“表单”包装器，并通过onSubmit命令来调用它。

无论哪种方式，我都会收到一条消息，指出未定义函数Progress（）。但它已定义，请参见下文。

这是代码。要使用表单包装器，请删除注释符号，并从提交按钮代码中删除“ onClick”。

<div class="header_upload"><b>File Selection</b></div>
<br><br><br><br>

<div class="upload_text" style="margin-left: 13%;">

<!--<form method="post" enctype="multipart/form-data" onSubmit="Progress()">-->

<div class="upload-btn-wrapper">
  <button class="btn">Select file to upload</button>
  <input type="file" name="fileToUpload" />
</div><br><br>

<div class="upload_text" style="margin-left: 5%;">
<button class="btn" id="submit_btn" type="submit" value="Submit"    onClick="Progress()">Upload</button></div>

</div>
<!--</form>-->

<br><br><br><br>

<div id="td1" class="text_display">*&nbsp;&nbsp;In process . . . </div>

<script>
function Progress() {

document.getElementById("submit_btn").addEventListener("submit", myFunction);

for (i = 0; i < 7; i++) {
    id = "#td" + i.toString();
    console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());
    console.log(id);
    setTimeout(function(id));
    }
}
</script>

<script>
setTimeout(function(id){
document.getElementById(id).innerHTML = "new content";
}, 500);
</script>

这是CSS：

.header_upload{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 16pt;
    color: rgb(175,222,162);
    margin-left: 20%;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align:center;
}

.btn {
  border: 1px solid rgb(117,163,126);
  color: green;
  background-color: black;
  padding: 8px 20px;
      border-radius: 15px;
  font-size: 20px;
  font-weight: bold;
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 13pt;
  color: rgb(117,163,126);
  text-align: center;
  cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

button img {
  margin-right: 5px;
  vertical-align: middle;
}

* html button { width: 90px; }

.upload_text{
   font-family: CamphorW01-Thin, sans-serif;
   font-size: 16pt;
   color: rgb(175,222,162);
}

.text_display{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 12pt;
    color: rgb(73,115,186);
    margin-left: 18%;
    line-height: 1.5;
}

#td1.text_display{ }
#td2.text_display{ }
#td3.text_display{ }
#td4.text_display{ }
#td5.text_display{ }
#td6.text_display{ }
#td7.text_display{ }

.text_display_f{ 
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 12pt;
    color: rgb(73,115,186);
    margin-left: 15%;
    line-height: 1.5;
    color:rgb(175,222,162);
    font-size: 16pt;
    margin-left: 16%;
}

input.alignright {
    position: absolute;
    right: 0;
}

我对这个问题的研究表明，我会添加addEventListener，但是这样做不会改变结果。没有其他研究改变我的结果。

感谢任何想法。

Answer 1

这是这个问题的答案。在上面的脚本中，这两行不正确：

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

setTimeout(function(id));

当我删除这两行时，脚本将正确执行：

<script>
function Progress() {

for (i = 0; i < 7; i++) {
    id = "#td" + i.toString();
    console.log(id);
    }
}
</script>

Answer 2

将功能的定义放在其用法上方。

static void Main(string[] args)
        {


            string path = "your_file_path";

            string text = System.IO.File.ReadAllText(path);

            string[] parsedText= text.Split(';');

            foreach (var item in parsedText)
            {
                //do some
            }

        }

使用onClick时“未定义Progress（）”，但已定义

2 个答案: