Question

当我使用jsfiddle时，HTML和javascript完美交互（如果这有所不同，我就是这样做的）。当我使用谷歌驱动器托管时，html显示正确，但没有发生javascript交互。

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Click</title>
</head>
<body>
    <script type="text/javascript" src="clickerjs.js"></script>
    <button id="button">Click me</button>
    <button id="auto">Buy an autoclicker!</button>
    <button id="tupgrade">Time Upgrade!</button>
    <button id="cupgrade">Click Upgrade!</button>
    <div id="buytenup">Buy Ten</div>
    <table>
        <tr>
            <td>Clicks</td>
            <td>:</td>
            <td id="clicks">0</td>
        </tr>
        <tr>
            <td>Click value</td>
            <td>:</td>
            <td id="cvalue">1</td>
        </tr>
        <tr>
            <td>Autoclickers</td>
            <td>:</td>
            <td id="autoAmount">0</td>
        </tr>
        <tr>
            <td>Time</td>
            <td>:</td>
            <td id="time">1000ms</td>
        </tr>
        <tr>
            <td>Autoclicker cost</td>
            <td>:</td>
            <td id="autocost">1</td>
        </tr>
        <tr>
            <td>Time upgrade cost</td>
            <td>:</td>
            <td id="tupcost">2</td>
        </tr>
        <tr>
            <td>Click upgrade cost</td>
            <td>:</td>
            <td id="cupcost">1</td>
        </tr>
    </table>
    <div id="console">Consoooooole</div>
    </body>
</html>

这是JS：

var clicks = 0;
var autoCost = 1;
var autoClicks = 0;
var timer;
var tUpcost = 1;
var time = 1000;
var cUpcost = 1;
var clickValue = 1;


function update() {
    var e = document.getElementById("clicks");
    e.innerHTML = clicks;
    var e1 = document.getElementById("autoAmount");
    e1.innerHTML = autoClicks;
    var e2 = document.getElementById("autocost");
    e2.innerHTML = autoCost;
    var e3 = document.getElementById("tupcost");
    e3.innerHTML = tUpcost;
    var e4 = document.getElementById("cvalue");
    e4.innerHTML = clickValue;
    var e5 = document.getElementById("cupcost");
    e5.innerHTML = cUpcost;

}

document.getElementById("button").onclick = function () {
    clicks += clickValue;
    update();
};

document.getElementById("auto").onclick = function () {
    if (clicks < autoCost) {
        var x = document.getElementById("console");
        x.innerHTML = "Too expensive!";
    } else {
        clicks -= autoCost;
        autoClicks++;
        autoCost += 2;
        var z = document.getElementById("console");
        z.innerHTML = "Upgrade complete!";
    }
    update();
};

//Time
document.getElementById("tupgrade").onclick = function () {
    if (clicks < tUpcost) {
        var p = document.getGetElementById("console");
        p.innerHTML = "Too expensive!";
    } else {
        clicks -= tUpcost;
        time -= 2;
        tUpcost += 2;
        clearInterval(timer);
        timer = setInterval(function () {
            clicks += autoClicks;
            update();
        }, time);
        var l = document.getElementById("console");
        l.innerHTML = "Upgrade complete!";
        var o = document.getElementById("time");
        o.innerHTML = time + "ms";
    }
    update();
};

timer = setInterval(function () {
    clicks += autoClicks;
    update();
}, time);

document.getElementById("cupgrade").onclick = function () {
    if (clicks < cUpcost) {
        var h = document.getGetElementById("console");
        h.innerHTML = "Too expensive!";
    } else {
        clicks -= cUpcost;
        clickValue += 2;
        cUpcost += 2;
        var g = document.getElementById("console");
        g.innerHTML = "Upgrade complete!";
    }
    update();
};

Answer 1

因为您在创建DOM之前加载了javascript，所以您将找不到任何绑定事件的元素。

解决方案1：

将您的javascript放在身体的底部。

<body>
   // html markup

   // load the scripts here
</body>

解决方案2：

将代码包装在onload处理程序中。

window.onload = function(){
    // Code comes here
};

链接html和javascript以使clicker工作？

1 个答案: