Click here to Skip to main content
15,908,166 members
Search within:


addEventListener not working
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
Javascript
HTML
i'm new to this and this is my Question i have html file and extended JavaScript file
html file has one textarea i need get every letter when i type textarea show as a alertbox with that text (testing purposes)
i use the addEventListener to get event but it's not works

can you please show where the wrong in my code

my html file looks like this

HTML
<!DOCTYPE html>
<html>
<head>

</head>
<body>
         <script src="script.js"></script>
	<form name="txtBox" id="txtBox">
						
        <textarea  style="font-size: 12pt; width: 500px;" id="box1" rows="7"></textarea>
                        
    </form>
</body>
</html>


My Extended JavaScript file looks like this

JavaScript
function textfunc()
{
var text = document.txtBox.box1.value;
alert(text);
// rest of function is here
}

document.getElementById("txtBox.box1").addEventListener("onkeyup",textfunc,false);
Posted
Updated 5-May-14 12:32pm
v2
Add a Solution
Comments
Sergey Alexandrovich Kryukov 5-May-14 17:36pm    
Where the first line of the script called? Call it in the script from the body.
—SA
Manoj Chamikara 5-May-14 17:52pm    
@Sergey
Thank you Quick Response Can you more explain please how to do that
Sergey Alexandrovich Kryukov 5-May-14 17:55pm    
I mean, put the script tag under the body tag. Then it is executed without triggering of anything, and your addEventListener will be called.
Also, do you use a debugger?
—SA
Manoj Chamikara 5-May-14 18:01pm    
I cut Script tag and past it to under body tag but nothing change dude
I'm using notepad++
Sergey Alexandrovich Kryukov 5-May-14 18:25pm    
Oh, and textfunc should go first. This is scripting. You are using the function object (in addEventListener) which you did not yet created.
—SA

1 solution

You are no getting it. Now, where did you get this document.txtBox.box1?

Do this:
JavaScript
textBox = document.getElementById("txtBox.box1"); // now it's accessible by the function below

function someTest() {
    alert(textBox.value);
}

textBox.addEventListener("onkeyup", someTest, false);


I understand this is just for testing. In real life, you can use the event handler with a parameter, or setup the handler on the element typw, or, even better jQuery approach.
If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

To add a handler in HTML, use something like
HTML
<input type="text" onkeyup="someTest();" />


—SA
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise
Privacy
Cookies
Terms of Use
Last Updated 5 May 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-05-29:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900