Question

我有一个HTML按钮，我想在点击时增加一个JavaScript变量值：

＆＃13;

<a id="right-btn" onclick="increasePokemon_ID()">

＆＃13;

这是脚本：

＆＃13;

var pokemon_ID = 1;

function increasePokemon_ID() {
        pokemon_ID++;
    }

＆＃13;

我也尝试过这种方式，但都没有奏效：

＆＃13;

document.getElementById("right-btn").onclick = function() {
        increasePokemon_ID();
}

＆＃13;

该值在此div中输出：

＆＃13;

document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID;

＆＃13;

<div id="id-number"></div>

＆＃13;

代码有什么问题？

完整代码：

＆＃13;

<?php
    require 'database.php';
    $id = null;
    if ( !empty($_GET['id'])) {
        $id = $_REQUEST['id'];
    }

    if ( null==$id ) {
        $pdo = Database::connect();
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "SELECT * FROM pokemons where id = ?";
        $q = $pdo->prepare($sql);
        $q->execute(array($id));
        $data = $q->fetch(PDO::FETCH_ASSOC);
        Database::disconnect();
    }
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="css/style.css" rel="stylesheet">
    </head>

    <body>
        <div id="pokedex">

        <div id="left">

            <div id="top-left">
                <div id="top-leds">
                    <div id="top-red-led"></div>
                    <div id="top-yellow-led"></div>
                    <div id="top-green-led"></div>
                </div>
            </div>

            <div id="led"></div>

            <div id="left-triangle"></div>

                <div id="screen-border">
                </div>

                <div id="screen">
                    <div class="name"><?php echo $data['name'];?></div>
                </div>

                <div id="cross">
                    <div id="center">
                        <div id="cross-center">
                            <div id="center-circle"></div>
                        </div>
                        <div id="up-btn">
                            <div id="upAr"></div>
                        </div>
                        <a id="right-btn" onclick="increasePokemon_ID()">
                            <div id="rightAr"></div>
                        </a>
                        <div id="left-btn">
                            <div id="leftAr"></div>
                        </div>
                        <div id="down-btn">
                            <div id="downAr"></div>
                        </div>
                    </div>
                </div>

                <div id="id-number"></div>

                <div id="blue-btn"></div>
            </div>

            <div id="middle">
                <div id="charniere-haute"></div>
                <div id="charniere-basse"></div>
            </div>


            <div id="right">
                <div id="info-screen"></div>

                <div id="right-triangle"></div>

                <div id="left-arrow-button">
                    <div id="left-arrow"></div>
                </div>

                <div id="right-arrow-button">
                    <div id="right-arrow"></div>
                </div>

                <div id="keyboard">
                    <div class="top-key"></div>
                    <div class="top-key"></div>
                    <div class="top-key"></div>
                    <div class="top-key"></div>
                    <div class="top-key"></div>
                    <div class="bottom-key"></div>
                    <div class="bottom-key"></div>
                    <div class="bottom-key"></div>
                    <div class="bottom-key"></div>
                    <div class="bottom-key">Help</div>
                </div>

                <div id="type-display1"><?php echo $data['type'];?></div>
                <div id="type-display2"></div>
            </div>
        </div>

        <script>
            var pokemon_ID = 0;

            function increasePokemon_ID() {
                pokemon_ID++;
                document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID;
            }

            document.getElementById("right-btn").onclick = function() {
                increasePokemon_ID();
            }
        </script>
    </body>

</html>

＆＃13;

Answer 1

该值实际上是递增的，但您没有向div显示更新的值。

试试这个：

var pokemon_ID = 0;
var el = document.getElementById("id-number");

function increasePokemon_ID() {
    pokemon_ID++;
    el.innerHTML = "no. 00" + pokemon_ID;
}

<a id="right-btn" onclick="increasePokemon_ID()">

<div id="id-number">0</div>

Answer 2

这是因为您没有在点击时更新HTML，而只是更新变量的值。您可以将document.getElementById("id-number").innerHTML="no. 00" + pokemon_ID;添加到onclick功能或increasePokemon_ID功能。

变量增量不起作用

2 个答案: