2016-10-06 4 views
0
var x = 50; 
var y = 50; 
document.addEventListener("keydown", checkKey, false); 
function checkKey(e) { 
    if (e.keyCode == "37") { 
    x = x--; 
    } 
} 
document.getElementById("test").innerHTML = x; 

これを行うと、左矢印を押してもxは変わりません。したがって、 "test"のinnerHTMLは変更されず、50にとどまります。なぜですか?キーダウンで変数を変更する

答えて

2

これは確かに変数を変更するだけで、HTMLを更新していないだけです。

場所内のイベントハンドラinnerHTMLラインを、それだけでpageload

var x = 50; 
var y = 50; 
document.addEventListener("keydown", checkKey, false); 
function checkKey(e) { 
    if (e.keyCode == "37") { 
    x = x--; 
    document.getElementById("test").innerHTML = x; 
    } 
} 

KeyboardEvent.keyCodeが一貫していないことに注意してくださいに誰かがボタンを押したときに更新し、ないので、とMDN

に従って

この機能はWeb標準から削除されました。一部のブラウザでもまだ がサポートされていますが、削除中です。

0

これは機能外で変更されたためです。

JS:

var x = 50; 
var y = 50; 
document.addEventListener("keydown", checkKey, false); 

function checkKey(e) { 
    if (e.keyCode == "37") { 
    x--; 
    document.getElementById("test").innerHTML = x; 
    } 
} 
document.getElementById("test").innerHTML = x; 

HTML:

<div id="test"></div> 

http://codepen.io/DaCurse0/pen/VKQYJb

0

使用X - 1の代わりにx--と場所innerHTMLプロパティの

条件であれば内部
var x = 50; 
var y = 50; 
document.addEventListener("keydown", checkKey, false); 
function checkKey(e) { 
    if (e.keyCode == "37") { 
    x = x - 1; 
    document.getElementById("test").innerHTML = x; 
    } 
} 

ここでは動作中のフィドルです:https://jsfiddle.net/2oz87hvr/