Javascript同一addeventlistener多个元素

我正在与addeventlistener一起创建事件并动态添加删除类名称。这是我的代码。我得到预期的结果为第一个文本框，但不是下一个我错了。Javascript同一addeventlistener多个元素

<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>

来源

2013-05-13 Prabha Karan

ID必须是唯一的。 – 2013-05-13 12:54:27

对几个元素使用类。 ID应该是独一无二的。 – powerbuoy 2013-05-13 12:54:39

此外，我一度强烈建议使用jQuery，这将使你的生活变得如此简单 – mplungjan 2013-05-13 12:55:25

-1

<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>

来源

2013-05-13 12:59:33

这我已经尝试过。这不是我的期望。 http://jsfiddle.net/8ZPkd/ – 2013-05-13 13:09:04

你的实际需求是什么？你想用gettexts（）函数做什么e =？ – 2013-05-13 13:10:59

如果我点击第一个文本框，它应该创建新的类（test5），一旦我点击第二个文本框类（test5）应该从fisrt文本框中删除，它应该添加到下一个。这是我期望你能帮助 – 2013-05-13 13:14:13

-3

的第一个建议：请使用jquery;

其次，在你做实验之前，你必须等待页面加载事件;

三，不要把代码放在身体里面！

如果我理解你whant请问这是什么代码：

<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>

这是所有乡亲！

来源

2013-05-13 13:07:55 aorlando

为什么downvote请？ – aorlando 2013-05-13 13:35:45

您需要访问您的事件处理程序内的事件对象访问受影响的元素：使用事件代表团

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

而且你不需要到事件处理程序分配给所有的投入，而只是一个共同的祖先（如文档或周围格）：

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

编辑：工作示例：http://jsfiddle.net/88DnZ/

另外：如果你只是想改变焦点上的输入元素的样式，不需要使用JavaScript。只需使用CSS：

input:focus { 
    border-color: red; 
}

来源

2013-05-13 13:18:25 RoToRa

Javascript同一addeventlistener多个元素

回答

相关问题