Как разместить кнопку в таблице, чтобы она тоже работала?

при создании таблицы для отображения данных каждого обновления кликера для файлов 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>

Кнопка отображается, как и предполагалось, однако я не могу щелкнуть ее и выполнить эту функцию.

🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Jquery62551 вопрос Html113619 вопросов Html table2465 вопросов

Ответ:

Решено

Вы не можете нажать кнопку внутри своей таблицы, потому что div с идентификатором «mulah» перекрывает вашу таблицу. Вы можете увидеть это при проверке вашего элемента внутри вашего браузера. Просто сделайте так, чтобы 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>

Как разместить кнопку в таблице, чтобы она тоже работала?

Ответ:

Интересные вопросы для изучения