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

Question

好吧，我想这在技术上是两个不同的问题，但它们看起来很相似，似乎值得一口气问他们（我真的是新手，另一个 none问题似乎有相关的答案）。

无论出于何种原因，每当我尝试运行在我的 wampserver 上通过本地主机制作的这个测试宾果网络游戏时（开箱即用的配置 afaik），外部 javascript 不会运行，虽然大多数 css 文件工作得很好，但我似乎无法显示 table 边框。虽然，就像制作这个 post 一样，js 文件似乎工作正常，但我似乎仍然无法显示 table 边框（甚至内联似乎都无法解决问题）。这可能是 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>

Answer 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.

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

请检查这个fiddle

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

My wampserver seems to be having issues dealing with external JS and CSS files

javascript

css

wamp