时间戳

首页 > 解决方案 > 如何在表格中放置一个按钮并使其也能正常工作？

javascript - 如何在表格中放置一个按钮并使其也能正常工作？

问题描述

在创建一个表格来显示每个 cookie 点击器升级的数据时，我想在表格中为每个升​​级提供一个按钮，以便我可以按下它并升级升级。我认为我当前的代码可以工作，但由于某种原因，无法单击该按钮。

我尝试了不同的方法来创建按钮，还尝试将按钮移动到 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>

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

标签： javascriptjqueryhtmlhtml-table

解决方案

您无法单击表格内的按钮，因为 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>

推荐阅读