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

Question

我有一個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);'>&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 個解決方案

解決方案1
0 2017-03-11 06:52:15

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

問題描述

1 個解決方案

解決方案1 0 2017-03-11 06:52:15

解決方案1
0 2017-03-11 06:52:15