Javascript代碼在從內嵌文件移動到外部文件時產生錯誤

我有一個內置於我正在處理的頁面的副本腳本，並且當副本JS內聯時，它工作得很好，但只要我將它移動到外部，它會產生以下錯誤： copy.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of nullJavascript代碼在從內嵌文件移動到外部文件時產生錯誤

我不確定爲什麼，因爲內聯時沒有問題。該部分代碼的副本：

<?php 
$connect = mysqli_connect("localhost", "brandina_templat", "REMOVED", "brandina_templates"); 
$catresult = "SELECT * FROM categories"; 
$catquery = mysqli_query($connect,$catresult); 
$catquery2 = mysqli_query($connect,$catresult); 
?> 
<html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Templates Sheet | Brandin Arsenault's</title>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script src="js/bootstrap.js"></script> 
      <script src="js/tabcontent.js"></script> 
      <link href="css/bootstrap.css" rel="stylesheet" /> 
     </head> 
     <body> 
     <div class="container"> 
       <br /> 
       <h1 align="center">Templates Sheet</h1> 
        <center><ul class="tabs"> 
<?php 
    if(!$catquery) 
    { 
     die('Invalid query: ' . mysql_error()); 
    } 
     while($row = mysqli_fetch_array($catquery)) 
     { 
      $number=$row['number']; 
      $tabname=$row['tabname']; 
      $catname=$row['catname']; 
      echo "<li class='tab-link' data-tab='$tabname'>$catname</li>"; 
     } 
?> 
     </ul> 
<?php 
    if(!$catquery2) 
    { 
     die('Invalid query: ' . mysql_error()); 
    } 
     while($row = mysqli_fetch_array($catquery2)) 
     { 
      $number=$row['number']; 
      $tabname=$row['tabname']; 
      $catname=$row['catname']; 
      $result = "SELECT * FROM templates WHERE category=$number"; 
      $query = mysqli_query($connect,$result); 
      echo "<div id='$tabname' class='tab-content'> 
             <table><center>"; 
        $c = 0; 
        $n = 3; 
       if(!$query) 
        { 
         die('Invalid query: ' . mysql_error()); 
        } 
         while($row = mysqli_fetch_array($query)) 
          { 
           $id=$row['id']; 
           $longname=$row['longname']; 
           $shortname=$row['shortname']; 
           $text=$row['text']; 
            if($c % $n == 0 && $c != 0) 
             { 
              echo '</tr><tr>'; 
             } 
            $c++; 
            echo " 
             <td> 
         <center><b>$longname</b></center><textarea id='$id' cols='25' rows='3'>$text</textarea><br /><button id='$shortname'>Copy</button> 
             </td> 
             <script> 
              var shortname = '$shortname'; 
             </script>"; 
          } 
      echo "</center></table></div>"; 
     } 
?> 
<script src='js/copy.js'></script> 
</center> 
</div> 
</body> 
</html>

copy.js是：提前

document.getElementById(shortname).addEventListener('click', function() { 
    copyToClipboardMsg(document.getElementById('$id'), 'msg'); 
}); 
function copyToClipboardMsg(elem, msgElem) { 
     var succeed = copyToClipboard(elem); 
    var msg; 
    if (!succeed) { 
     msg = 'Copy not supported or blocked. Press Ctrl+c to copy.' 
    } else { 
     msg = 'Text copied to the clipboard.' 
    } 
    if (typeof msgElem === 'string') { 
     msgElem = document.getElementById(msgElem); 
    } 
    msgElem.innerHTML = msg; 
    setTimeout(function() { 
     msgElem.innerHTML = ''; 
    }, 2000); 
} 

function copyToClipboard(elem) { 
     // create hidden text element, if it doesn't already exist 
    var targetId = '_hiddenCopyText_'; 
    var isInput = elem.tagName === 'INPUT' || elem.tagName === 'TEXTAREA'; 
    var origSelectionStart, origSelectionEnd; 
    if (isInput) { 
     // can just use the original source element for the selection and copy 
     target = elem; 
     origSelectionStart = elem.selectionStart; 
     origSelectionEnd = elem.selectionEnd; 
    } else { 
     // must use a temporary form element for the selection and copy 
     target = document.getElementById(targetId); 
     if (!target) { 
      var target = document.createElement('textarea'); 
      target.style.position = 'absolute'; 
      target.style.left = '-9999px'; 
      target.style.top = '0'; 
      target.id = targetId; 
      document.body.appendChild(target); 
     } 
     target.textContent = elem.textContent; 
    } 
    // select the content 
    var currentFocus = document.activeElement; 
    target.focus(); 
    target.setSelectionRange(0, target.value.length); 

    // copy the selection 
    var succeed; 
    try { 
      succeed = document.execCommand('copy'); 
    } catch(e) { 
     succeed = false; 
    } 
    // restore original focus 
    if (currentFocus && typeof currentFocus.focus === 'function') { 
     currentFocus.focus(); 
    } 

    if (isInput) { 
     // restore prior selection 
     elem.setSelectionRange(origSelectionStart, origSelectionEnd); 
    } else { 
     // clear temporary content 
     target.textContent = ''; 
    } 
    return succeed; 
}

謝謝！

來源

2016-09-06 Brandin Arsenault

您的PHP解釋器是否在本地所有文件上運行？ – Blake

也許刪除ID「$ shortname」的美元符號？ – Cagy79

@BrandinArsenault，更新我的答案，你可以檢查。 – Dekel

變量$shortname在您使用內聯代碼時存在，但是當您將代碼移到外部時，它不再存在。

您可以使用：

<script> 
    var shortname = '$shortname'; 
</script> 
<script src='js/copy.js'></script>

而在你copy.js文件，你應該使用：

document.getElementById(shortname).addEventListener('click', function() {

否則 - JavaScript代碼正在尋找元素，它的ID是$shortname，和你並沒有真正的價值。

來源

2016-09-06 23:05:26 Dekel

感謝您的回覆。 JS繼續產生錯誤，就像我原來的帖子一樣。我不確定爲什麼。我用你的步驟，完全理解你在說什麼，但遺憾的是沒有解決問題。 –

1.你如何打印變量？ 2.你的html看起來像什麼？ – Dekel

看到我的更新帖子。 –

Javascript代碼在從內嵌文件移動到外部文件時產生錯誤

回答

相關問題