0

これがばかげた質問である場合は申し訳ありませんが、AJAX を使用して JavaScript 変数を「リアルタイム」で表示しようとしましたが、ほとんど運がありませんでした。私は間違いなく初心者なので、これが問題になる可能性があります.

http://jsfiddle.net/bagelpirate/m9Pm2/

<script>
var one = 0;
var two = 0;
var three = 0;
</script>

<body>
<div id="div_1">
    One: <script>document.write(one)</script> | 
    Two: <script>document.write(two)</script> | 
    Three: <script>document.write(three)</script>
</div>

<div id="div_2">

    <img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />

    <img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />

    <img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" /> 

</div>
</body>

上記のコードでわかるように、ユーザーが画像の 1 つをクリックすると、カウントを増やしてページの上部に表示したいと考えています。HTML5 出力タグを見つけました。これを使用して JavaScript 変数をリアルタイムで表示できるかどうか疑問に思っていました。出力タグはフォームでのみ機能するため、私が読んだことはすべて、それができないことを暗示しているようです? とにかく、聞いて損はないと思いました！

御時間ありがとうございます！

4

2 に答える 2

1

DOM の読み込みが完了した後で、document.write を使用して DOM に書き込むべきではありません。質問に jQuery のタグを付けたので、それを使用して更新できると思います。代わりに、スクリプト ブロック内から DOM を更新します。始めるのに役立つ例を次に示します。

http://jsfiddle.net/prxBb/

<script type="text/javascript">
    $(function() {
        var one = 0;
        var two = 0;
        var three = 0;

        $('img#mine').click(function() {
            one++;
            $('span#one').html(one);
        });
         $('img#forest').click(function() {
            two++;
            $('span#two').html(two);
        });
         $('img#farm').click(function() {
            three++;
            $('span#three').html(three);
        });
    });
</script>

<body>
<div id="div_1">
    One: <span id="one"></span> | 
    Two: <span id="two"></span> | 
    Three: <span id="three"></span>
</div>

<div id="div_2">

<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />

<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />

<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" /> 

</div>
</body>
于 2013-10-16T15:01:47.017 に答える