How can I amend this script to close with 'onkeypress'

  • (2 Pages)
  • +
  • 1
  • 2

25 Replies - 2090 Views - Last Post: 13 March 2013 - 05:49 AM

#16 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 08:09 AM

View PostAddio569, on 12 March 2013 - 03:35 PM, said:

if we take the original code:

element.addEventListener('click',resume,false)


so I'm adding a click eventlistener.

function resume(){
 
		var bod = document.body;
		bod.removeChild(overlay);
		bod.removeChild(box);
		bod.removeChild(sheet);
		}

that line of thought is already wrong.

this is where you add the event listener:
element.addEventListener('click',resume,false)

(the other code block is simply a function definition and should be done before the addEventListener line (that it works nevertheless has other reasons))

the sole requirement for the variable resume is that it has to be a function (at that point).

therefore you need to define the function first.



View PostAddio569, on 12 March 2013 - 03:35 PM, said:

adding the eventlistener for a keypress.

function keyPressListener(e){
             if(e.keyCode == 13) {

again, you donít add the listener here, you define a function.


View PostAddio569, on 12 March 2013 - 03:35 PM, said:

so I'm guessing I'm adding a function to call that deals with the keypress, but why didn't I have to do this with the click?

because you mixed up what part of code is doing what.
Was This Post Helpful? 0
  • +
  • -

#17 ThrowsException  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 83
  • Joined: 21-February 12

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 08:46 AM

View PostAddio569, on 12 March 2013 - 09:35 AM, said:

I tried:

element.addEventListener("keypress", keyPressListener, resume, false);
	
	function keyPressListener(e){
             if(e.keyCode == 13) {
	
					function resume(){
 
					var bod = document.body;
					bod.removeChild(overlay);
					bod.removeChild(box);
					bod.removeChild(sheet);
					}
		
			}
	}

it shows the alert but I can't get rid of it!
thanks



this line doesn't make any sense.
element.addEventListener("keypress", keyPressListener, resume, false)


you had it right
element.addEventListener("keypress", keyPressListener, false)


What you are still not getting is the difference between defining a function and calling a function.

function keyPressListener(e){
             if(e.keyCode == 13) {
	
					function resume(){
 
					var bod = document.body;
					bod.removeChild(overlay);
					bod.removeChild(box);
					bod.removeChild(sheet);
					}
		
			}
	}



your resume() method is not being called here it is being defined here. You've already written a resume method you can just reuse it here. you should be able to call it just like this.
if(e.keyCode == 13) {
    //this function already exist just call it
    resume();
}


Was This Post Helpful? 0
  • +
  • -

#18 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 08:55 AM

ok, I think I'm getting somewhere. the reason why the keypress works is this piece of code in the body:

document.onkeypress = function () { 
    
	audio.load();
        audio.play();
	customAlert('X');
};


same for click:

buttonPlaySound.onclick = function () { 
    audio.load();
    audio.play();
	customAlert('X');
};


so are you saying it should be like this:

function resume()
{
 document.body.removeChild(overlay);
 document.body.removeChild(box);
 document.body.removeChild(sheet);
}
element.addEventListener('keypress',keyPressListener,false)

             function keyPressListener(e){
             if(e.keyCode == 13) {
			 
			 function resume();
			 }



so I've defined the resume function, added the keypress eventlistener, defined the keypresslistener, called the resume function.

but I'm not sure where to go from there....
Was This Post Helpful? 0
  • +
  • -

#19 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 11:18 AM

no, you didnít call it, you tried to define it.
Was This Post Helpful? 0
  • +
  • -

#20 ThrowsException  Icon User is offline

  • D.I.C Head

Reputation: 33
  • View blog
  • Posts: 83
  • Joined: 21-February 12

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 12:52 PM

Stop putting the function keyword in front of resume in the keyPressListener. Everyone in this discussion has pointed out several times that you are not doing what you think you are doing in the keyPressListener.

This defines a function take note of the function keyword. this tells Javascript "Hey, function declaration coming your way"
function resume(){
    //write some code here that I want to use again later
}



This calls a function notice the lack of the function keyword. this tells Javascript "Hey I want to run this code i've already defined"
//We've already written resume, now lets use that code to do something
resume();
//magical stuff as happened your code has been called 


Was This Post Helpful? 0
  • +
  • -

#21 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,414
  • Joined: 12-December 12

Re: How can I amend this script to close with 'onkeypress'

Posted 12 March 2013 - 01:11 PM

@OP Your code-indenting still remains confusing and I recommend (again..) that you fix this.
Was This Post Helpful? 0
  • +
  • -

#22 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: How can I amend this script to close with 'onkeypress'

Posted 13 March 2013 - 02:06 AM

@throwsexception, Ok, now I understand the difference thanks.

@andrewsw I've tried to indent, but I don't know how to, so if I'm doing it wrong why hasn't some one said?

edit: OK, OK obviously this is bad script that makes no sense, so I did a bit of digging and was able to sort of implement this:

$("body").keypress(function(event) {
    if (event.which == 13) {
            audio.load();
            audio.play();
	    customAlert('X');
            }
	   else (event.which == 27) {
			window.location.reload()
			}
});


but the page doesn't reload when I press esc, it will if I set it to enter, but I can't for obvious reasons....

This post has been edited by Addio569: 13 March 2013 - 03:34 AM

Was This Post Helpful? 0
  • +
  • -

#23 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: How can I amend this script to close with 'onkeypress'

Posted 13 March 2013 - 03:56 AM

of course it doesnít. an else does not have a condition.

what you can do to emulate an elseif():
if (condition_1) {

}
else {
  if (condition_2) {

  }
}

// resp. (just leaving off the braces of the else)
if (condition_1) {

}
else if (condition_2) {

}

Was This Post Helpful? 0
  • +
  • -

#24 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: How can I amend this script to close with 'onkeypress'

Posted 13 March 2013 - 05:00 AM

ok so following your advice I did:

$("body").keypress(function(event) {
    if (event.which == 13) {
        audio.load();
        audio.play();
	    customAlert('X');
        }
	else { 
	if	(event.which == 27) { 
		window.location.reload();
	}
}

if (event.which == 13) {
        audio.load();
        audio.play();
	    customAlert('X');
        }
else if (event.which == 27) {
		window.location.reload();
	}
}


but its still not working, I've either added one too many braces or I'm missing one, but I did follow what you said.

thanks

This post has been edited by Dormilich: 13 March 2013 - 05:34 AM

Was This Post Helpful? 0
  • +
  • -

#25 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: How can I amend this script to close with 'onkeypress'

Posted 13 March 2013 - 05:34 AM

is there anything in the Error Console?
Was This Post Helpful? 0
  • +
  • -

#26 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: How can I amend this script to close with 'onkeypress'

Posted 13 March 2013 - 05:49 AM

View PostDormilich, on 13 March 2013 - 05:34 AM, said:

is there anything in the Error Console?


yes unexpected end of input on line 1 which is :
<html>


here is the full code if it helps:

<script>
var message;
function customAlert(message)
{
window.onresize = resizeCheck;
function resizeCheck()
{
 
winX = window.innerWidth;
winY = window.innerHeight; 
modelX = (winX/2)-(920/2)+document.body.scrollLeft;
modelY = (winY/2)-(920/2)+document.body.scrollTop;
var _elm=document.getElementById('overlay');
_elm.style.width=winX+"px";
_elm.style.height=winY+"px";
var _elm=document.getElementById('alert');
_elm.style.left=modelX+"px";
_elm.style.top=modelY+"px";
}
winX = window.innerWidth;
winY = window.innerHeight; 
//alert(document.body.scrollTop);
modelX = (winX/2)-(920/2)+document.body.scrollLeft;
modelY = (winY/2)-(920/2)+document.body.scrollTop;
winX+=document.body.scrollLeft;
winY+=document.body.scrollTop;
var overlay = document.createElement('div');
   overlay.setAttribute("id","overlay");
   overlay.setAttribute("class", "overlay");
   document.body.appendChild(overlay);

var box = document.createElement('div');
   box.setAttribute("id","alert");
   box.innerHTML='<center><div id="button2" ><div id="alert2"><span class="message2">'+message+'</span></div><input type="button" id="ok1" value="OK" ></div></center>';
   document.body.appendChild(box);   
//css
var sheet = document.createElement('style')
sheet.innerHTML = ".overlay{background-color: #FFFFFF;   opacity: .5;   filter: alpha(opacity=70);   position:absolute; top: 0; left: 0;   width:"+winX+"px; height: "+winY+"px;   z-index: 99999;} #alert{width:900px; height:645px; background:#000000; position:absolute;left: "+modelX+"px;top: "+modelY+"px; z-index: 999999;border-radius:3px;border:1px; box-shadow:1px 2px 5px #676767;}#ok1{position:absolute;bottom:10px;left:430px;cursor:pointer; color:black;font:bold 13px sans-serif;text-transform:uppercase;border:none;border-radius:50px;}#alert2 span {font:500px sans-serif;color:#FF0000;display:inline-block;margin-top:50px;}";
document.body.appendChild(sheet);
var element=document.getElementById("ok1");

element.addEventListener('click',resume,false)
	function resume(){
 
                   var bod = document.body;
					bod.removeChild(overlay);
					bod.removeChild(box);
					bod.removeChild(sheet);
}

}


var audio = document.getElementsByTagName("audio")[0];

buttonPlaySound.onclick = function () { 
    audio.load();
    audio.play();
	customAlert('X');
};




$("body").keypress(function(event) {
    if (event.which == 13) {
        audio.load();
        audio.play();
	    customAlert('X');
        }
	else { 
	if	(event.which == 27) { 
		window.location.reload();
	}
}

if (event.which == 13) {
        audio.load();
        audio.play();
	    customAlert('X');
        }
else if (event.which == 27) {
		window.location.reload();
	}
}
</script>

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2