我有一个 html 代码，只要我没有单击提交按钮，它就可以正常工作。我正在渲染服务器目录结构的复选框。使用复选框我想让用户选择文件。我已经在 JavaScript 中处理了 onclick 事件，并维护了一个数组来存储选定的文件。它还在右侧面板上显示所选文件。到目前为止一切正常，但提交按钮后事情变得很奇怪。我检查了 onclick 事件是否被捕获，但 document.write 无法正常工作，直到我手动刷新页面。
document.getElementById("选择").innerHTML=selectedFiles;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.button {
width: 320px !important;;
background-color: #4CAF50 !important;; /* Green */
border: none !important;;
color: white !important;;
padding: 15px 32px !important;;
text-align: center!important;;
text-decoration: none!important;;
display: inline-block!important;;
font-size: 16px!important;;
left :80px !important;;
top :20px !important;;
position: relative !important;;
}
.button1{
width: 220px !important;;
background-color: #006699 !important;;
border: none !important;;
color: white !important;;
left :80px !important;;
top :20px !important;;
position: relative !important;;
padding: 10px 20px 10px 20px !important;;
text-decoration: none !important;;
display: block !important;;
font-size: 16px!important;;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;;
cursor: pointer !important;;
}
div.headerLeft {
background-color: #006699;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
div.headerRight {
background-color: #b3e6b3;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
.wrap {
width: 100%;
overflow:auo;
}
.fleft {
float:left;
width: 50%;
background:white;
}
.fright {
float: right;
background-color:white;
width: 50%;
}
</style>
</head>
<body>
<form action="list.php" id="copy" method="post" >
<div id="container" style="width:100%;">
<div class="fleft">
<div class="headerLeft">Last Modified files</div>
<?php
function listFolderFiles($dir,$parent,$lastmodifiedfiles)
{
$flag = false;
foreach (new DirectoryIterator($dir) as $fileInfo) {
if (!$fileInfo->isDot()) {
$file=$fileInfo->getFilename();
if ($fileInfo->isDir()) {
$path = $fileInfo->getPathname();
echo '<div data-role="main" class="ui-content">';
echo ' <div data-role="collapsible">';
echo " <h1>$path</h1>";
echo " <p>";
//echo "<input type='checkbox' name='$path' id='$path' value='$path' onclick='handleClick(this);'>  $path<br>";
listFolderFiles($path,"$dir",null);
echo '</p>';
echo '</div>';
echo '</div>';
}
else {
echo "<input type='checkbox' name='$dir/$file' id='$dir/$file' value='$dir/$file' onclick='handleClick(this);'>  $dir/$file<br>";
}
}
}
}
$dir = "css";
$lastmodifiedfiles = [];
if (isset($_POST['copysubmit'])) {
//listFolderFiles($dir,"",$lastmodifiedfiles);
}
else {
listFolderFiles($dir,"",$lastmodifiedfiles);
}
?>
</div>
<div class="fright" >
<button type=submit" name="copysubmit" class="button" value="Submit" onclick="clean_up_list();" >Copy to airbnstories</button>
<br/>
<br/>
<div style="color:#006699;position:relative; left:30px" id="selectlabel">
<?php
if (isset($_POST['copysubmit'])) {
//do something
}
?>
</div>
<div id="selection" style="position:relative; left:40px">
</div>
</div>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var filesList = {};
function clean_up_list() {
filesList = {};
document.getElementById("selectlabel").innerHTML="";
document.getElementById("selection").innerHTML="";
}
function handleClick(cb) {
if (cb.checked) {
filesList[cb.value] = true;
}
else {
delete filesList[cb.value];
}
var keys = Object.keys(filesList);
var selectedFiles = "";
for(i in keys){
selectedFiles += keys[i];
selectedFiles += "<br/>";
}
if(Object.keys(filesList).length > 0) {
document.getElementById("selectlabel").innerHTML="Files selected";
}
document.getElementById("selection").innerHTML=selectedFiles;
}
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
var checkboxesChecked = [];
// loop over them all
for (var i=0; i<checkboxes.length; i++) {
// And stick the checked ones onto an array...
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
// Return the array if it is non-empty, or null
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
</script>
最佳答案
document.write() 用于写入文档流。
在您的情况下，当您的提交处理程序被调用时，流很可能已经关闭，因为您的文档已完成加载。
请注意，因为在关闭的文档流上调用 document.write() 会自动调用 document.open()，理论上这应该会清除文档。
关于Javascript document.getElementById() 在提交按钮后不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42732258/