Question

我有一个HTML代码，一旦我没有点击提交按钮就可以正常工作。我正在为服务器的目录结构渲染复选框。使用复选框我想让用户选择文件。我在javascript中处理了onclick事件并维护了一个存储所选文件的数组。它还会在右侧面板上显示所选文件。到目前为止，每件事情都运作良好，但在提交按钮后，事情变得奇怪了。我检查了onclick事件是否被捕获但是document.write在我手动刷新页面之前没有工作。

的document.getElementById（＆＃34;选择＆＃34）。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);'>&nbsp;&nbsp;&nbsp$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);'>&nbsp;&nbsp;&nbsp$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>

Answer 1

document.write()用于写入文档流。

在您的情况下，当您的提交处理程序被调用时，流很可能已经关闭，因为您的文档已经完成加载。

注意，因为在已关闭的文档流上调用document.write()会自动调用document.open()，这理论上应该清除该文档。

Javascript document.getElementById（）在提交按钮后无法正常工作

1 个答案: