2

私は今日までJSの位置が私のhtmlページの結果を変えることができるとは知りませんでした。imagesrcで2つの異なるURLの「クリック時」を切り替えたい。なぜこの最初のコードは私が望むように機能するのに、2番目のコードは機能しないのですか？2番目のコードのソースhtmlは、varnot_a_bad_wordの空白の文字列を生成します。

最初のコード：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>'Murica!'</title>
    </head>
    <body>
        <?php
        $dbhost = 'databasePlace';
        $dbname = 'mine';
        $dbuser = 'me';
        $dbpass = '*****';

        $link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
        mysqli_select_db($link, $dbname);
        $name = $_GET["fname"];

        $query = sprintf(
            "SELECT image_url, Type
             FROM Pokemon c
             WHERE c.name = '%s'", 
             mysqli_real_escape_string($link, $name));

        $result = mysqli_fetch_assoc(mysqli_query($link, $query));

        echo '<img id="pokemon_card" onclick="changeImage()" height="450" 
                  width="330" src="' . $result['image_url'] . '"/>';

        mysqli_close($link);
        ?>
        <script>
            function changeImage() {
                element = document.getElementById('pokemon_card');
                var not_a_bad_word = "<?php echo $result['image_url']; ?>";

                if (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg") {
                    element.src = not_a_bad_word;
                }
                else {
                    element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg";
                }
            }
        </script>
    </body>
</html>

2番目のコード：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>'Murica!</title>
        <script>
            function changeImage() {
                element = document.getElementById('pokemon_card');
                var not_a_bad_word = "<?php echo $result['image_url']; ?>";

                if (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg") {
                    element.src = not_a_bad_word;
                }
                else {
                    element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg";
                }
            }
        </script>
    </head>
    <body>
        <?php
        $dbhost = 'databasePlace';
        $dbname = 'mine';
        $dbuser = 'me';
        $dbpass = '*****';

        $link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
        mysqli_select_db($link, $dbname);
        $name = $_GET["fname"];

        $query = sprintf(
            "SELECT image_url, Type
             FROM Pokemon c
             WHERE c.name = '%s'", 
             mysqli_real_escape_string($link, $name));

        $result = mysqli_fetch_assoc(mysqli_query($link, $query));

        echo '<img id="pokemon_card" onclick="changeImage()" height="450" 
                  width="330" src="' . $result['image_url'] . '"/>';

        mysqli_close($link);
        ?>
    </body>
</html>
4

2 に答える 2

5

最初の例では、変数を作成する PHP コードは、変数がエコーされる前$result['image_url']に実行されます。

空白を生成する2番目の例を見ると、実際にはエコーされた後$result['image_url']にのみ定義されます。

于 2012-11-20T08:55:28.023 に答える
1

これは、2 番目の例の JS コードの挿入時点では、要素「pokemon_card」がまだ存在しないためです。したがって、セレクターは定義されておらず、コードで使用できません。ドキュメントの最後に配置する DOM 要素を使用する js コードを配置することを常にお勧めします。

于 2012-11-20T08:52:28.287 に答える