0

私は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>
4

3 に答える 3

-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-13T12:59:33.563 に答える
-3

最初の提案: jquery を使用してください。

次に、何かを行う前に、ページの読み込みイベントを待機する必要があります。

第 3 に、body 内にコードを入れないでください ... !;

あなたが何を望んでいるのか理解できれば、これはコードです：

<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-13T13:07:55.350 に答える