Question

在创建一个表以显示每个Cookie Clicker升级的数据时，我想要一个用于表中每个升级的按钮，以便可以按它并升级该升级。我以为我当前的代码可以用，但是由于某种原因无法单击该按钮。

我尝试了各种创建按钮的方法，还尝试将按钮移至Java脚本代码。

    let cookies = 0;
    let clickerValue = 1;
    let clickerCost = 10;
    let clickerAmount = 1;
    let grandmaValue = 2;
    let grandmaCost = 100;
    let grandmaAmount = 0;

    function setupCookies() {
    document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    displayValue();
    displayCost();
    displayAmount();
    }

    function displayValue() {
    document.getElementById("clickerValue").innerHTML = clickerValue;
    document.getElementById("grandmaValue").innerHTML = grandmaValue;

    }

    function displayCost() {
    document.getElementById("clickerCost").innerHTML = clickerCost;
    document.getElementById("grandmaCost").innerHTML = grandmaCost;
    }

    function displayAmount() {
    document.getElementById("clickerAmount").innerHTML = clickerAmount;
    document.getElementById("grandmaAmount").innerHTML = grandmaAmount;


    }

    function clicker() {
    cookies += clickerValue;
    if (cookies === 1) {
        document.getElementById("mulah").innerHTML = cookies + " COOKIE";
    }
    else {
        document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    }
    }

    function clickerIncrease() {
    if (cookies >= clickerCost) {
        cookies -= clickerCost;
        clickerAmount += 1;
        setupCookies();
    }
    else {
        alert("you dont have enough cookies");
    }
    }

    function grandma() {
    cookies += grandma
    }

    function grandmaIncrease() {
    if (grandmaAmount >= 1) {
        setInterval(grandma(), 1000);
        document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    }
    }

    .parade {
    position: relative;
    left: 30px;
    font-size: 100px;
    font-family: "Agency FB";
    }

    .shade {
    position: relative;
    left: 100px;
    font-size: 50px;
    font-family: "Agency FB";
    color: white;
    text-decoration: none;
    background-color: chocolate;
    padding: 20px;
    }

    .shade:hover {

    }

    .shade:active {

    }

    .cartier {
    float: right;
    font-size: 20px;
    }

    .cartierButtons {
    font-size: 20px;
    text-decoration: none;
    color: darkred;
    background-color: grey;
    }

    .cartierButtons:hover {
    color: red;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cookie Clicker</title>
    </head>

    <script src = "cookie%20clicker.js"></script>

    <link rel="stylesheet" type="text/css" href="cookie%20clicker.css"/>

    <body onload = "setupCookies()">
    <table class = "cartier">
        <tr>
            <th>UPGRADES</th>
            <th>VALUE</th>
            <th>COST</th>
            <th>AMOUNT</th>
        </tr>
        <tr>
            <td><a href="#" class="cartierButtons"                                                                                             
                 onclick="clickerIncrease()">CLICKER</a></td>
            <td id = "clickerValue"></td>
            <td id = "clickerCost"></td>
            <td id = "clickerAmount"></td>
        </tr>
        <tr>
            <td>GRANDMA</td>
            <td id = "grandmaValue"></td>
            <td id = "grandmaCost"></td>
            <td id = "grandmaAmount"></td>
        </tr>
    </table>
    <div class = "parade" id = "mulah"></div>
    <a href="#" class="shade" onclick="clicker()">COOKIES</a>
    </body>
    </html>

该按钮将按预期显示，但是我无法单击它并执行该功能。

Answer 1

您不能在表格内单击按钮，因为ID为“ mulah”的div与表格重叠。在浏览器中检查元素时，您会看到此信息。只是使div不与您的按钮重叠。

 #mulah{
   width: 50px;
  }

let cookies = 0;
    let clickerValue = 1;
    let clickerCost = 10;
    let clickerAmount = 1;
    let grandmaValue = 2;
    let grandmaCost = 100;
    let grandmaAmount = 0;

    function setupCookies() {
    document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    displayValue();
    displayCost();
    displayAmount();
    }

    function displayValue() {
    document.getElementById("clickerValue").innerHTML = clickerValue;
    document.getElementById("grandmaValue").innerHTML = grandmaValue;

    }

    function displayCost() {
    document.getElementById("clickerCost").innerHTML = clickerCost;
    document.getElementById("grandmaCost").innerHTML = grandmaCost;
    }

    function displayAmount() {
    document.getElementById("clickerAmount").innerHTML = clickerAmount;
    document.getElementById("grandmaAmount").innerHTML = grandmaAmount;


    }

    function clicker() {
    cookies += clickerValue;
    if (cookies === 1) {
        document.getElementById("mulah").innerHTML = cookies + " COOKIE";
    }
    else {
        document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    }
    }

    function clickerIncrease() {
    if (cookies >= clickerCost) {
        cookies -= clickerCost;
        clickerAmount += 1;
        setupCookies();
    }
    else {
        alert("you dont have enough cookies");
    }
    }

    function grandma() {
    cookies += grandma
    }

    function grandmaIncrease() {
    if (grandmaAmount >= 1) {
        setInterval(grandma(), 1000);
        document.getElementById("mulah").innerHTML = cookies + " COOKIES";
    }
    }

.parade {
    position: relative;
    left: 30px;
    font-size: 100px;
    font-family: "Agency FB";
    }

    .shade {
    position: relative;
    left: 100px;
    font-size: 50px;
    font-family: "Agency FB";
    color: white;
    text-decoration: none;
    background-color: chocolate;
    padding: 20px;
    }

    .shade:hover {

    }

    .shade:active {

    }

    .cartier {
    float: right;
    font-size: 20px;
    }

    .cartierButtons {
    font-size: 20px;
    text-decoration: none;
    color: darkred;
    background-color: grey;
    }

    .cartierButtons:hover {
    color: red;
    }

  #mulah{
   width: 50px;
  }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cookie Clicker</title>
    </head>

    <script src = "cookie%20clicker.js"></script>

    <link rel="stylesheet" type="text/css" href="cookie%20clicker.css"/>

    <body onload = "setupCookies()">
    <div>
    <table class = "cartier">
        <tr>
            <th>UPGRADES</th>
            <th>VALUE</th>
            <th>COST</th>
            <th>AMOUNT</th>
        </tr>
        <tr>
            <td><a href="#" class="cartierButtons"                                                                                             
                 onclick="clickerIncrease()">CLICKER</a></td>
            <td id = "clickerValue"></td>
            <td id = "clickerCost"></td>
            <td id = "clickerAmount"></td>
        </tr>
        <tr>
            <td>GRANDMA</td>
            <td id = "grandmaValue"></td>
            <td id = "grandmaCost"></td>
            <td id = "grandmaAmount"></td>
        </tr>
    </table>
    </div>
    <div class = "parade" id = "mulah" ></div>
    <a href="#" class="shade" onclick="clicker()">COOKIES</a>
    </body>
    </html>

如何将按钮放在表格中并使其起作用？

1 个答案: