простое событие onclick не работает - PullRequest
Новая
       0

простое событие onclick не работает

0 голосов
/ 03 сентября 2011

У меня довольно простая настройка с использованием html, css и javascipt.Когда пользователь нажимает на один из множества существующих элементов div, он должен либо появляться, либо исчезать, а также устанавливать для скрытого поля формы значение «1» или «0».

Сначала css: 

div.hidden{
    visibility: hidden;
}
div.shown{
    visibility: visible;
}

javascript: 

function toggle(id){
    if (document.getElementById("h"+id).value=="0"){
        document.getElementById("h"+id).value="1";
        document.getElementById("i"+id).className='shown';
    }
    else{
        document.getElementById("h"+id).value="0";
        document.getElementById("i"+id).className='hidden';
    }
}

и HTML: 

<html>
  <head>
    <script src="foo.js">
    </script>
  </head>
  <body>
   <form action="blah blah" > 
    <div class="hidden" id="i0" onclick="toggle(0);" >
      <!--some image -->
      <input type="hidden" id="h0" name="0" value="0" />
    </div>

    <div class="hidden" id="i1" onclick="toggle(1);" >
      <!--some image -->
      <input type="hidden" id="h1" name="1" value="0" />
    </div>

    <!-- etc -->
   </form>
  </body>
</html>

Я знаю, что JavaScript правильно связан и работает, потому что когда я вызываю функцию через консоль Chrome,это работает отлично и делает то, что я ожидаю.Однако, когда я нажимаю на этот div, он не работает!

Что я делаю не так?

Ответы [ 4 ]

1 голос
/ 03 сентября 2011

Ваши div изначально скрыты (class="hidden"), поэтому вы не увидите ничего при запуске страницы и не сможете нажимать на них. Также у вас есть опечатки (пока нет события onlick: -)): 

onlick="toggle(1);"

вероятно должно быть: 

onclick="toggle(1);"
1 голос
/ 03 сентября 2011

Вы должны попытаться лизнуть свой элемент, а не щелкнуть, возможно, тогда он будет работать. Или измените onlick на onclick.

0 голосов
/ 03 сентября 2011

Мне кажется, вы устанавливаете событие на скрытый элемент, и поэтому он ничего не делает.

0 голосов
/ 03 сентября 2011

Идентификаторы не могут начинаться с цифры.Это спецификация.

Попробуйте это так: 

function toggle(id){
    if (document.getElementById(id).value=="0"){
        document.getElementById(id).value="1";
        document.getElementById("i"+id.substr(1)).className='shown';
    }
    else{
        document.getElementById(id).value="0";
        document.getElementById("i"+id.substr(1)).className='hidden';
    }
}

- 

<html>
  <head>
    <script src="foo.js">
    </script>
  </head>
  <body>
   <form action="blah blah" > 
    <div class="hidden" id="i0" onclick="toggle('t0');" >
      <!--some image -->
      <input type="hidden" id="t0" name="0" value="0" />
    </div>

    <div class="hidden" id="i1" onclick="toggle('t1');" >
      <!--some image -->
      <input type="hidden" id="t1" name="1" value="0" />
    </div>

    <!-- etc -->
   </form>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...