vendredi 15 mai 2015

JavaScript: If only working for first statement?

Ok the problem is that only the SHIFT key is working??? Its the first IF on the list so for some reason it isn't going to the other ones??? Help Please :)

Also... If someone can tell me why the key code isn't displaying that would be awesome :)

KeypressCapture.js

//START Screen_Keypress_Capture
function Screen_Keypress_Capture () {
    document.onkeydown = KeyDown_Handler;
    document.onkeyup = KeyUp_Handler;
    var CTRL_Key = false;         
    var SHIFT_Key = false;        
    var ALT_Key = false;
    var JavaScript_Key_Code = -1;

function KeyDown_Handler(ThisEvent) { // (e) is short for event: You can use any name you like (ThisEvent)
                                        // It's a way of passing the same event from one function to another
                                        // START Key-Down Handler
    var Key_Pressed = '';
    if (document.all)
    {
        var Window_Event = window.event;
        Key_Pressed =  Window_Event.keyCode;
    }
    else
    {
        Key_Pressed = ThisEvent.keyCode;
    }
    Detect_Keys_Pressed(Key_Pressed, true);
    Show_Keys_Pressed();
}// END Key-Down Handler

function KeyUp_Handler(ThisEvent) { // START Key-Up Handler
    var Key_Pressed = '';
    if (document.all)
    {
        var Window_Event = window.event;
        Key_Pressed = Window_Event.keyCode;
    }
    else
    {
        Key_Pressed = ThisEvent.keyCode;
    }
    Detect_Keys_Pressed(Key_Pressed, false);
    Show_Keys_Pressed();
}// END Key-Up Handler

function Detect_Keys_Pressed(Key_Pressed, Is_Key_Still_Down) { // START Detect Which Key Is Pressed
    if (Key_Pressed == '16')
    {
        SHIFT_Key = Is_Key_Still_Down;
    }
    else if (Key_Pressed == '17')
    {
        CTRL_Key = Is_Key_Still_Down;
    }
    else if (Key_Pressed == '18')
    {
        ALT_Key = Is_Key_Still_Down;
    }
    else
    {
        if(Is_Key_Still_Down)
            JavaScript_Key_Code = Key_Pressed;
        else
            JavaScript_Key_Code = -1;
    }   
}// END Detect Which Key Is Pressed

function Show_Keys_Pressed() { // START Show Results IN DIV's
// Example to move a div
// var dest = document.getElementById("my_div");
// var orig = document.getElementById("ad_div");
// orig.parentNode.removeChild(orig);
// dest.appendChild(orig);
    var Show_Current_Keys_Pressed = document.getElementById('Show_Current_Keys_Pressed');
    var DIV_Shift = document.getElementById('DIV_Shift');
    var DIV_Ctrl = document.getElementById('DIV_Ctrl');
    var DIV_Alt = document.getElementById('DIV_Alt');
    var DIV_Char = document.getElementById('DIV_Char');

    if(SHIFT_Key == true){
        DIV_Shift.parentNode.removeChild(DIV_Shift);
        Show_Current_Keys_Pressed.appendChild(DIV_Shift);
        DIV_Shift.style.visibility = "visible";
    }

    else if(SHIFT_Key == false){
        DIV_Shift.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Shift);
        body.appendChild(DIV_Shift);    
    }

    else if(CTRL_Key == true){
        DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
        Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
        DIV_Ctrl.style.visibility = "visible";
    }

    else if(CTRL_Key == false){
        DIV_Ctrl.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Ctrl);
        body.appendChild(DIVCtrl);
    }

    else if(ALT_Key == true){
        DIV_Alt.parentNode.removeChild(DIV_Alt);
        Show_Current_Keys_Pressed.appendChild(DIV_Alt);
        DIV_Alt.style.visibility = "visible";
    }

    else if(CTRL_Key == false){
        DIV_Alt.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Alt);
        body.appendChild(DIV_Alt);
    }

    else if(JavaScript_Key_Code == true){
        DIV_Char.parentNode.removeChild(DIV_Char);
        Show_Current_Keys_Pressed.appendChild(DIV_Char);
        DIV_Char.innerHTML = JavaScript_Key_Code;   
        DIV_Char.style.visibility = "visible";
    }

    else if(CTRL_Key == false){
        DIV_Char.style.visibility = "hidden";
        DIV_Char.innerHTML = JavaScript_Key_Code;   
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Char);
        body.appendChild(DIV_Char);
    }

    else{}

}// END Show Results IN DIV's

}
// END Screen_Keypress_Capture

KeypressCapture.css

    #Show_Current_Keys_Pressed {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #fff;
    clear: both;
    float: left;
}

#Show_Current_Combo {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FCFFA8;
    clear: both;
    float: left;
}

#Show_Created_String {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FFE2C6;
    clear: both;
    float: left;
}

#DIV_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red;
    visibility: hidden;
    float: left;
}

#DIV_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

#DIV_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

#DIV_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;

}

.STYLE_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red; 
    visibility: hidden;
    float: left;
}

.STYLE_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

.STYLE_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

.STYLE_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;
}

KeypressCapture..html

<div id="Show_Current_Keys_Pressed">
</div>

<div id="Show_Current_Combo">
</div>

<div id="Show_Created_String">
</div>


<div id="DIV_Shift">
SHIFT
</div>

<div id="DIV_Ctrl">
CTRL
</div>

<div id="DIV_Alt">
ALT
</div>

<div id="DIV_Char">
</div>

Aucun commentaire:

Enregistrer un commentaire