クリック関数がグローバル変数を更新しない

ユーザーがボタンをクリックしたときにグローバル変数xを変更したい。しかし、それは変更されていません。私はこれをGoogleで研究しましたが、私はすべてのことを正しくやっているようです。クリック関数がグローバル変数を更新しない

testing.html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testing</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="testing.js"></script> 
    <style> 
     div { 
      border: solid 1px orange; 
      height: 50px; 
      width: 50px; 
      font-size: 45px; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <button>Click here</button> 
    <div><div/> 
</body> 
</html>

tesing.js：

var x; 
$(document).ready(function() { 
    x = 0; 
    $("div").text(x); 
    $("button").on("click", function() { 
     x = 1; 
    }); 
    $("div").text(x); //the div stays at "0" even after I click the button 
});

私はx = 1後にクリック機能内$("div").text(x);を置く場合、それは動作しますが、私はそれがでxを変更する必要がありますローカルスコープではなくグローバルスコープであるため、htmlファイル内の他のJS関数でも使用できます。

EDIT： 私はhtmlファイル内のドキュメントレディ機能にその更新xを使用する必要がありますので、私が行うことができないので、私はクリック機能のx外をテストしようとしている理由は、クリック機能内のすべて。多分、私がやろうとしていることは不可能でしょうか？しかし、それがグローバル変数が存在する理由だと私は考えましたか？

出典

2017-02-18 Lilly Karak

あなたがそうそして 'X'がインクリメントされますクリックすると、クリックイベントだけで起動しますが、 '$（ "div要素"）、テキスト（X）;'の式は次のようになりますデフォルトで 'x'が' 0'のときにDOMで実行されるので、あなたがしたいことは意味をなさない。 –

ボタンをクリックした後で（クリック機能にない）後の機能を変更するにはどうすればよいですか？ –

クリックハンドラー内でHTMLを更新する必要があります。 $("div").text(x);は、xという値を$("div")のテキストとして割り当てますが、テキストをその変数にバインドしないため、変数の値が更新されたときにテキストを更新する必要があります。。

var x = 0; 
 
$("div").text(x); 
 
$("button").on("click", function() { 
 
    $("div").text(++x); 
 
});

div { 
 
    border: solid 1px orange; 
 
    padding: 10px 15px; 
 
    display: inline-block; 
 
    font-size: 45px; 
 
    text-align: center; 
 
} 
 
div::before { 
 
    content: "x = "; 
 
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button>Increment</button><br> 
 
<div></div>

出典

2017-02-18 18:27:00

クリック関数がグローバル変数を更新しない

答えて

関連する問題