从内联文件移动到外部文件时,Javascript代码会产生错误

时间:2016-09-06 23:00:01

标签: javascript php jquery

我在我正在处理的页面中内置了一个复制脚本,当复制JS是内联时,它工作得很好,但是只要我将它移到外部,它就会产生以下错误: $QTDIR/examples/widgets/widgets/scribble

我不确定为什么因为内联时没有问题。部分代码的副本是:

copy.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null

copy.js是:

    <?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>

提前致谢!

1 个答案:

答案 0 :(得分:1)

当您使用内联代码时,变量$shortname存在,但当您将代码移动到外部时,它不再存在。

您可以使用:

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

在你的copy.js文件中你应该使用:

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

否则 - javascript代码正在查找其id为$shortname的元素,而您实际上并没有具有该值的元素。