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

  • (2 Pages)
  • +
  • 1
  • 2

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

#1 Addio569  Icon User is offline

  • D.I.C Regular

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

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

Posted 08 March 2013 - 03:03 AM

I have made a buzzer that brings up a custom javascript alert (found on the web) when it is activated you have to click an 'OK' button to get rid of it, how do I add the ability to close it by pressing the enter key as well??

here is the script:

<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()
{
 
 document.body.removeChild(overlay);
 document.body.removeChild(box);
 document.body.removeChild(sheet);
}
}
</script>


Is This A Good Question/Topic? 0
  • +

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

#2 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 08 March 2013 - 10:42 PM

You've made a event handler for click now you're going to need one for a keypress that works almost the exact same way with a different event obviously.

Should have to do something like this. Code has not been tested. Code is presented as-is without any guarantees.
element.addEventListener("keypress", keyPressListener, false);

function keyPressListener(e)
{
   //13 is keyCode for the enter key, atleast it has been for every javascript page i've ever made
   if(e.keyCode = 13) {
       //call your resume method
   }
}


Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3812
  • View blog
  • Posts: 13,527
  • Joined: 12-December 12

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

Posted 09 March 2013 - 12:25 AM

if(e.keyCode = 13) {

this is an assignment, double equals == are required for comparison.
Was This Post Helpful? 1
  • +
  • -

#4 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 11 March 2013 - 03:03 AM

ok I tried:

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

element.addEventListener("keypress", keyPressListener, false);

function keyPressListener(e)
{
   //13 is keyCode for the enter key, atleast it has been for every javascript page i've ever made
   if(e.keyCode == 13) {
       function resume()
{
 
 document.body.removeChild(overlay);
 document.body.removeChild(box);
 document.body.removeChild(sheet);
}
   }
}



but when I press the enter key it just makes the transparency white?
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3812
  • View blog
  • Posts: 13,527
  • Joined: 12-December 12

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

Posted 11 March 2013 - 05:38 AM

You are creating two functions named resume().

The structure of your code is also unclear because of the inconsistent indentation levels. If you re-indent it, it will be much easier to see what is going on, and where it might be going wrong.

BTW In Javascript it is preferred that the opening bracket following a function declaration is on the same line:

function someFunction() {

}

(but it is not wrong to put it on the following line :) )
Was This Post Helpful? 1
  • +
  • -

#6 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 11 March 2013 - 07:25 AM

ok I tried:

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

element.addEventListener("keypress", keyPressListener, false);

	function keyPressListener(e){
   //13 is keyCode for the enter key, atleast it has been for every javascript page i've ever made
   if(e.keyCode = 13) {
   
		function resume(){
}
}

}
}


I already defined 'resume' so this time I just called it, but it's still not working, do I need a loop? also?

thanks

This post has been edited by Dormilich: 11 March 2013 - 01:58 PM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3812
  • View blog
  • Posts: 13,527
  • Joined: 12-December 12

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

Posted 11 March 2013 - 07:48 AM

You are still defining the function resume() twice and your indentation still doesn't help to read, and correct, your code.

function resume()

creates/ defines the function, it doesn't call the function.
Was This Post Helpful? 0
  • +
  • -

#8 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 11 March 2013 - 07:51 AM

as Andrewsw pointed out my javascript was not correct and you've repeated my mistake. change e.keyCode = 13 to e.keyCode == 13.

Also do you use any kind debugger when running your javascript? learning to use the debugger is a skill that you'll definitely want to have going forward with javascript.
Was This Post Helpful? 0
  • +
  • -

#9 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 11 March 2013 - 08:02 AM

no, I'm reading up about javascript but apart from following instructions and just experimenting I know nothing about javascript.

so I need to call the function is that what you are saying?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3812
  • View blog
  • Posts: 13,527
  • Joined: 12-December 12

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

Posted 11 March 2013 - 08:05 AM

View PostThrowsException, on 11 March 2013 - 07:51 AM, said:

as Andrewsw pointed out my javascript was not correct and you've repeated my mistake. change e.keyCode = 13 to e.keyCode == 13.

Yes he (the OP) corrected it previously, but then re-instated the error :whistling:

View PostAddio569, on 11 March 2013 - 08:02 AM, said:

no, I'm reading up about javascript but apart from following instructions and just experimenting I know nothing about javascript.

so I need to call the function is that what you are saying?

Are you not studying Javascript? Following a tutorial.. You won't make much progress if you are just experimenting (copying and pasting) :whistling:
Was This Post Helpful? 0
  • +
  • -

#11 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 11 March 2013 - 08:09 AM

yes, I'm reading this book: http://www.amazon.co...63014495&sr=8-1

but I'm just starting out, I got this particular code off the internet, implemented it into another project I've done and now I'm trying to do the same but not very successfully, don't get me wrong I don't want all the answers just friendly advice and pointers..

so this is the current code:

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


so I've added an eventlistener, defined the function, but I can't see where I'm calling it to...

This post has been edited by Dormilich: 11 March 2013 - 01:58 PM

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3812
  • View blog
  • Posts: 13,527
  • Joined: 12-December 12

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

Posted 11 March 2013 - 11:01 AM

Calling a function:

// defining a function:
function someFunction() {
    // function statements
}
// calling the function:
someFunction();

I recommend that you continue studying from your book; cover the fundamentals before dabbling with code from the internet.

Your code would be more efficient and readable if you did:

    var bod = document.body;
    bod.removeChild(overlay); // etc.

Was This Post Helpful? 1
  • +
  • -

#13 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 - 02:13 AM

Ah ok thanks for that, I would really like to get this working though, I find if I know how a code works, I learn from it, tinker with it etc.

I've been asked to make this for a school I work at, so its not an assignment or anything, and like I said I want to learn so I don't want to just be given the answer.

so from my original code, I have defined the function and called the function, but for the keyboard listener there is the listener function itself and the function resume.

I thought if you had already defined the function you could call it again later on in the script?

I tried this:
element.addEventListener('click',resume,false)
element.addEventListener("keypress", keyPressListener, false);

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


am I on the right track?

This post has been edited by Dormilich: 12 March 2013 - 03:50 AM

Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

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

Posted 12 March 2013 - 03:54 AM

partly.

- you still mix up assignment and comparison (operators)
- you also mix up the definition and the execution of a function

you really, really need to learn the fundamentals of Java​Script. without that I canít imagine that anyone could understand it.
Was This Post Helpful? 1
  • +
  • -

#15 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 - 07:35 AM

OK well can someone help me change the click to a keypress that way I can see if I can implement the two.

I tried myself but can't get it to work.

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);
		}


calling the function? where do I define it first? in the eventlistener?

so if I take the keypress...

element.addEventListener("keypress", keyPressListener, false);


adding the eventlistener for a keypress.

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


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?

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



again I'm calling the function? so if I remove the click eventlistner with the keypress listener why doesn't it work?

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 post has been edited by Addio569: 12 March 2013 - 07:49 AM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2