Javascript same addeventlistener for more than one elements
Question
I am working with addeventlistener to create events and dynamically adding removing class name too. This is my code. Am getting expected result for first text box but not the next where i am wrong.
<html>
<style>
.test5 {
border: 1px solid #000;
outline: none;
}
</style>
<body>
<form id="form">
<input type="text" id="ids" class="test1" value="test1">
<div class="test7" id="test">test</div>
<input type="text" id="ids" class="test1" value="test2">
</form>
<script>
function gettext() {
var val = this.className += " test5";
console.log(val);
}
function gettexts() {
var val1 = document.getElementById('ids').classList.remove('test5');
}
var get = document.getElementsByClassName('test1');
//for (i = 0; i < get.length; i++) {
//get[i].addEventListener('focus', gettext, false);
//get[i].addEventListener('blur', gettexts, false);
get[0].addEventListener('focus', gettext, false);
get[0].addEventListener('blur', gettexts, false);
//}
</script>
</body>
<html>
3 answers
solution1
0 2013-05-13 13:18:25
You need to access the event object inside your event handler to access the affected element:
function gettext(event) {
event.target.className += 'test5';
console.log(event.target);
}
var get = document.getElementsByClassName('test1');
for (i = 0; i < get.length; i++) {
get[i].addEventListener('focus', gettext, false);
}
Also by using event delegation you don't need to assign the event handler to all inputs, but just to a common ancestor (eg the document or a surrounding div):
function gettext(event) {
if (event.target && event.target.nodeName == 'INPUT') {
event.target.className += 'test5';
console.log(event.target);
}
}
document.addEventListener('focus', gettext, true); // EDIT: Oops, the third parameter needs to true for this to work
EDIT: Working example: http://jsfiddle.net/88DnZ/
Also: if you just want to change the style of an input element on focus, there is no need to use JavaScript. Just use CSS:
input:focus {
border-color: red;
}
solution2
-1 ACCPTED 2013-05-13 12:59:33
<script>
function focus() {
var val = this.className = "test5";
console.log(val);
}
function blur() {
this.className = "test1";
}
var get = document.getElementsByTagName('input');
for (i = 0; i < get.length; i++) {
get[i].addEventListener('focus', focus, false);
get[i].addEventListener('blur', blur, false);
}
</script>
<style>
.test5
{
color:Red;
}
</style>
solution3
-3 2013-05-13 13:07:55
First suggestion: please use jquery;
Second, before you do somenthing you must wait the page load event;
Third, do not put code inside body ... !;
If I understand what you whant this is the code:
<html>
<style>
.test5{
border: 1px solid #000;
outline: none;
}
</style>
<script>
function gettext() {
var val = this.className += " test5";
console.log(val);
}
function gettexts() {
var val1 = document.getElementById('ids').classList.remove('test5');
}
window.onload = function(){
var get = document.getElementsByClassName('test1');
//for (i = 0; i < get.length; i++) {
//get[i].addEventListener('focus', gettext, false);
//get[i].addEventListener('blur', gettexts, false);
get[0].addEventListener('focus', gettext, false);
get[0].addEventListener('blur', gettexts, false);
//}
}
</script>
<body>
<form id="form">
<input type="text" id="ids" class="test1" value="test1">
<div class="test7" id="test">test</div>
<input type="text" id="ids" class="test1" value="test2">
</form>
<script>
</script>
</body>
<html>
That's all folks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.