錯誤頁面上的Javascript函數調用

Question

Heyo，

JavaScript函數調用有幾個問題。基本上我使用PHP來創建一個表，然後在頁面上調用init JavaScript來單擊一個標籤爲正確答案的按鈕。

現在，這一切工作正常，但是當我回到主網頁，並嘗試做同樣的事情再次失敗由於「遺漏的類型錯誤：無法調用‘點擊’空的」。發生這種情況的原因是，腳本被錯誤地再次調用，然後嘗試點擊不存在的內容，因此出現'null'錯誤。

如果我重新加載頁面，它再次正常工作，因爲直到調用JavaScript函數纔會被加載。

主要的問題似乎是JavaScript仍在加載（可能是因爲jquerymobile使用ajax調用來加載頁面，因此數據永遠不會被正確刷新除了強制頁面加載沒有Ajax，有什麼建議嗎？

JavaScript函數：

function showCorrectAnswer(correctAnswer) { 
    $(document).on("pageinit", function() { 
     document.getElementById(correctAnswer).click() 
    }) 
} 

PHP函數：

function populatedQuestionUI ($topicID, $questionID, $actionSought) { 
global $pdo; 

$query = $pdo->prepare("SELECT * FROM questions WHERE Topic = ? and QNo = ?"); 
$query->bindValue(1, $topicID); 
$query->bindValue(2, $questionID); 
$query->execute(); 

while ($row = $query->fetch(PDO::FETCH_ASSOC)) { 
    $results[] = $row; 
} 

?> 
<form name="questionUI" action="/MCExamSystemV2/Admin/manageQuestion.php" method="post"> 
    <input type="hidden" name="TopicID" value="<?php echo $_POST['topic']; ?>"/> 
    <input type="hidden" name="QuestionNo" value="<?php echo $_POST['question']; ?>"/> 
    <label for="QText">Question Text</label> 
    <input type="text" name="QText" value="<?php echo $results[0]['QText']; ?>"/> 
    <label for="AnswerText-1">First Answer</label> 
    <input type="Text" name="AnswerText-1" value="<?php echo $results[0]['AText1']; ?>"/> 
    <label for="AnswerText-2">Second Answer</label> 
    <input type="Text" name="AnswerText-2" value="<?php echo $results[0]['AText2']; ?>"/> 
    <label for="AnswerText-3">Third Answer</label> 
    <input type="Text" name="AnswerText-3" value="<?php echo $results[0]['AText3']; ?>"/> 
    <label for="AnswerText-4">Fourth Answer</label> 
    <input type="Text" name="AnswerText-4" value="<?php echo $results[0]['AText4']; ?>"/> 
    <label for="CorrectAnswer">Correct answer:</label> 
    <div data-role="controlgroup" data-type="horizontal"> 
     <input type="button" name="Answer-1" id="Answer-1" value=1 onClick="document.getElementById('CorrectAnswer').value='1'"/> 
     <input type="button" name="Answer-2" id="Answer-2" value=2 onClick="document.getElementById('CorrectAnswer').value='2'"/> 
     <input type="button" name="Answer-3" id="Answer-3" value=3 onClick="document.getElementById('CorrectAnswer').value='3'"/> 
     <input type="button" name="Answer-4" id="Answer-4" value=4 onClick="document.getElementById('CorrectAnswer').value='4'"/> 
    </div> 
    <input type="hidden" name="CorrectAnswer" id="CorrectAnswer" value='0'/> 
    <input type="submit" value="Confirm <?php echo $actionSought; ?>"> 
    <input type="button" value="Cancel" onClick="location.href='/MCExamSystemV2/Admin'"/> 
</form> 

<script src="/MCExamSystemV2/includes/scripts.js"></script>> 
<script>showCorrectAnswer('Answer-<?php echo $results[0]['CorrectA']; ?>')</script> 
<?php 
} 

Answer 1

主要的問題是，因爲你這樣做：

document.getElementById(correctAnswer).click(); 

你不檢查，如果該元素是在頁面上。更改爲：

var el = document.getElementById(correctAnswer); 
if (el) { 
    el.click(); 
}