我的 wampserver 似乎在处理外部 JS 和 CSS 文件时遇到问题答案

【问题标题】：My wampserver seems to be having issues dealing with external JS and CSS files我的 wampserver 似乎在处理外部 JS 和 CSS 文件时遇到问题
【发布时间】：2018-08-21 06:29:06
【问题描述】：

好的，我想这在技术上是 2 个独立的问题，但它们看起来很相似，值得一口气问它们（我真的是新手，其他问题似乎都没有相关答案)。

无论出于何种原因，每当我尝试在我的 wampserver 上运行我通过 localhost 制作的这个测试宾果网络游戏时（开箱即用的配置 afaik），外部 javascript 根本不会运行，虽然大多数 css 文件运行良好够了，我似乎无法显示表格边框。虽然，正如发表这篇文章一样，js 文件似乎工作正常，但我似乎仍然无法显示表格边框（甚至内联似乎都无法解决问题）。这可能是一个php问题吗？我是 wamp 新手，php 可能是我最不了解的领域。

var phase1 = []
var phase2 = []
   
for (i = 0; i < 37; i++){
        phase1[i] = i + 1
}

for (i = 0; i < 25; i++){
    var potVal = Math.floor(Math.random()*(phase1.length))
    phase2[i] = phase1[potVal]
    phase1.splice(potVal,1)
}

for (i = 0; i < phase2.length; i++){
    var count = i + 1
    var elem = count.toString()
    document.getElementById(count).innerHTML = phase2[i]
}

body{
    background-color: steelblue;
    font-family: Arial, Helvetica, sans-serif;
}

h1{
    color: white;
    text-align: center;
}

table{
    text-align: center;
    background-color: rgb(223, 165, 6);
    padding: 1%;
    width: 40%;
    height:80%;
    margin: auto;
    
}
table, th, td{
    border: 10px black;
}

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Bingo Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="stylegrrl.css" />
    <link rel="script" type="text/javascript" href="boople.js">
</head>
<body>
        <h1>Bingo Card<br>Test Game</h1>
    <table>
        <tr>
            <th id="1"></th>
            <th id="2"></th>
            <th id="3"></th>
            <th id="4"></th>
            <th id="5"></th>
        </tr>
        <tr>
            <th id="6"></th>
            <th id="7"></th>
            <th id="8"></th>
            <th id="9"></th>
            <th id="10"></th>         
        </tr>
        <tr>
            <th id="11"></th>
            <th id="12"></th>
            <th id="13"></th>
            <th id="14"></th>
            <th id="15"></th>
        </tr>
        <tr>
            <th id="16"></th>
            <th id="17"></th>
            <th id="18"></th>
            <th id="19"></th>
            <th id="20"></th>
        </tr>
        <tr>
            <th id="21"></th>
            <th id="22"></th>
            <th id="23"></th>
            <th id="24"></th>
            <th id="25"></th>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

我假设 boople.js 是您包含的本地 JS 文件？
对，就是那个js文件的名字。

标签： javascript css wamp

【解决方案1】：

function test(){  
    var phase1 = []
    var phase2 = []
       
    for (i = 0; i < 37; i++){
            phase1[i] = i + 1
    }

    for (i = 0; i < 25; i++){
        var potVal = Math.floor(Math.random()*(phase1.length))
        phase2[i] = phase1[potVal]
        phase1.splice(potVal,1)
    }

    for (i = 0; i < phase2.length; i++){
        var count = i + 1
        var elem = count.toString()
        document.getElementById(count).innerHTML = phase2[i]
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Bingo Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="test.js"></script>
    <style type="text/css">
        body{
            background-color: steelblue;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1{
            color: white;
            text-align: center;
        }

        table{
            text-align: center;
            background-color: rgb(223, 165, 6);
            padding: 1%;
            width: 40%;
            height:80%;
            margin: auto;
            
        }
        table, th, td{
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <h1>Bingo Card<br>Test Game</h1>
    <table>
        <tr>
            <th id="1"></th>
            <th id="2"></th>
            <th id="3"></th>
            <th id="4"></th>
            <th id="5"></th>
        </tr>
        <tr>
            <th id="6"></th>
            <th id="7"></th>
            <th id="8"></th>
            <th id="9"></th>
            <th id="10"></th>         
        </tr>
        <tr>
            <th id="11"></th>
            <th id="12"></th>
            <th id="13"></th>
            <th id="14"></th>
            <th id="15"></th>
        </tr>
        <tr>
            <th id="16"></th>
            <th id="17"></th>
            <th id="18"></th>
            <th id="19"></th>
            <th id="20"></th>
        </tr>
        <tr>
            <th id="21"></th>
            <th id="22"></th>
            <th id="23"></th>
            <th id="24"></th>
            <th id="25"></th>
        </tr>
    </table>
    <script type="text/javascript">
        test();
    </script>
</body>
</html>

我认为您的代码运行良好。您还需要提及该表格的边框样式属性。

table, th, td{
    border: 10px solid black;
}

请查看fiddle

【讨论】：

非常感谢，解决了边框问题。 js 文件仍然不会从 wamp 加载。编辑：为了提供更多上下文，只要我将代码放在页面上，就在表格之后，代码就可以正常工作，但是将其移动到外部文件会导致它完全出错。
我认为存在问题。您能否删除您的 html 的第一行并使用上面的...请让我知道它是否有效...
它对我有用。我认为您的 wamp 服务器存在问题。请检查服务器配置。
更改了问题，js 文件仍未加载。刚刚在chrome上检查了开发模式，它没有加载js文件。我应该查看任何特定的配置文件吗？
您能否使用更新后的答案。我在 js 文件中添加了一个函数并在您的 html 文件中调用它。如果你使用的是外部 JS 文件，你需要创建一个 js 函数并在你的 html 文件中使用它。