匹配keynum到数组索引号?

时间:2013-07-02 11:48:36

标签: javascript loops button for-loop

我有一个数组,索引号设置为65 -90(a-z键码)。 我想遍历我的数组以查看keypress事件产生的keynum是否匹配其中一个索引号,如果匹配,则将屏幕按钮的颜色变为红色,并将String.fromCharCode写入元素的innerHTML 。

让我们说我的按钮就是这个......

<input type="button" id="a" value="A">

这是我的JS代码......

document.onkeypress = keypress;


function keypress() {
    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");
    var d = document.getElementById("d");
    var e = document.getElementById("e");
    var f = document.getElementById("f");
    var g = document.getElementById("g");
    var h = document.getElementById("h");
    var i = document.getElementById("i");
    var j = document.getElementById("j");
    var k = document.getElementById("k");
    var l = document.getElementById("l");
    var m = document.getElementById("m");
    var n = document.getElementById("n");
    var o = document.getElementById("o");
    var p = document.getElementById("p");
    var q = document.getElementById("q");
    var r = document.getElementById("r");
    var s = document.getElementById("s");
    var t = document.getElementById("t");
    var u = document.getElementById("u");
    var v = document.getElementById("v");
    var w = document.getElementById("w");
    var x = document.getElementById("x");
    var y = document.getElementById("y");
    var z = document.getElementById("z");

    var buttons = [];
    buttons[65] = a;
    buttons[66] = b;
    buttons[67] = c;
    buttons[68] = d;
    buttons[69] = e;
    buttons[70] = f;
    buttons[71] = g;
    buttons[72] = h;
    buttons[73] = i;
    buttons[74] = j;
    buttons[75] = k;
    buttons[76] = l;
    buttons[77] = m;
    buttons[78] = n;
    buttons[79] = o;
    buttons[80] = p;
    buttons[81] = q;
    buttons[82] = r;
    buttons[83] = s;
    buttons[84] = t;
    buttons[85] = u;
    buttons[86] = v;
    buttons[87] = w;
    buttons[88] = x;
    buttons[89] = y;
    buttons[90] = z;

    var keynum = (window.event) ? event.keyCode: e.which; 
    var panel = document.getElementById("panel");
    var letter = String.fromCharCode(keynum);
    for(i = 65; i <= buttons.length; i++)
    {
        if(buttons[i] == keynum)
            {
           buttons[i].style.backgroundColor = 'red';
                panel.innerHTML += letter;


            }
    }
}

我怎样才能这样做,当我按下按钮时,相应的屏幕按钮变为红色? 这是我的JS小提琴...... http://jsfiddle.net/AdamMartin121/VXYFC/14/

1 个答案:

答案 0 :(得分:0)

function keypress() {


    var buttons = [];
    for (var i = 65; i <= 90; i++) {
        buttons[i] = buttons[i + 32] = document.getElementById(String.fromCharCode(i + 32));
    }

    var keynum = (window.event) ? event.keyCode : e.which;
    if (buttons[keynum]) {
        buttons[keynum].style.backgroundColor = 'red';
    }
}

您正在将buttons[i]keynum进行比较。但buttons[i]包含文档元素,而不是数字。您只想使用keynum作为buttons数组的索引。

我更改了buttons数组以包含大写和小写字母的条目,并使用循环填充它。您只有大写的条目,因此您必须按Shift才能使任何事情发生。< / p>

FIDDLE