Форум

vesnushka163 · #1 (**permalink**) 29.03.2014, 19:31

Всем здравствуйте!

У меня есть небольшая, даже глупая проблемка.

Язык JS изучаю всего месяц, дают его нам исковеркано, поэтому кроме как здесь помощи искать негде.

у меня есть задание:

Возьмите несколько (не менее пяти) любых картинок (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все картинки в различных местах и возле каждой картинки был, изначально "включенный" чек-бокс. С помощью чек-боксов пользователь должен иметь возможность включать/выключать показ соответсвующих картинок. Т.е. немедленно по нажатии чек-бокса картинка должна исчезать (или появляться).

Я написала код, но, увы сразу картинки не отображаются, а только при смене статуса checkbox. Как мне сделать так, чтобы при открытии страницы картинки показывались, а при смене статуса checkbox они исчезали?

Вот код:

<html>
<head>
<script type="text/javascript">
function showOrHide(cb, cat) {
cb = document.getElementById(cb);
cat = document.getElementById(cat);
if (cb.checked) cat.style.display = "block";
else cat.style.display = "none";
}
</script>
</head>
<body>
<table>
<div>
<tr><td>
<input type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");' checked/>
<br />
<div id = 'cat1' style = 'display: none;'><img src=1.jpg></div>
<td>
<input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' checked/>
<br />
<div id = 'cat2' style = 'display: none;'><img src=2.jpg></div>
<td>
<input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' checked/>
<br />
<div id = 'cat3' style = 'display: none;'><img src=3.jpg></div>
<tr><td>
<input type = 'checkbox' id = 'cb4' onchange = 'showOrHide("cb4", "cat4");' checked/>
<br />
<div id = 'cat4' style = 'display: none;'><img src=4.jpg></div>
<td>
<input type = 'checkbox' id = 'cb5' onchange = 'showOrHide("cb5", "cat5");' checked/>
<br />
<div id = 'cat5' style = 'display: none;'><img src=5.jpg></div>
</div>
</table>
</body>
</html>

сразу скажу, за корявость можете ругать, так как пишу, как дает преподаватель.

очень прошу помочь, так как я в ступоре.

vesnushka163 · #2 (**permalink**) 29.03.2014, 19:38

все, я разобралась! просто не нашла как тему удалить((((

Vlasenko Fedor · #3 (**permalink**) 29.03.2014, 19:57

http://learn.javascript.ru/play/RfPhqc
http://learn.javascript.ru/play/dNy6Jb

рони · #4 (**permalink**) 29.03.2014, 20:09

вариант без js

<!DOCTYPE HTML>
<html>

  <head>
    <style>
     :checked ~ div[id^=cat]{
        display: none;
      }
      div[id^=cat] {
        display:block
      }
    </style>
     </head>

  <body>
    <table>
      <tr>
        <td>
          <input type="checkbox" id="cb1" onchange="showOrHide(1);" checked/>
          <br />
          <div id="cat1">
            <img src="http://javascript.ru/forum/images/smilies/smile.gif">
          </div>
        </td>
        <td>
          <input type="checkbox" id="cb2" onchange="showOrHide(2);" checked/>
          <br />
          <div id="cat2">
            <img src="http://javascript.ru/forum/images/smilies/dance3.gif">
          </div>
        </td>
        <td>
          <input type="checkbox" id="cb3" onchange="showOrHide(3);" checked/>
          <br />
          <div id="cat3">
            <img src="http://javascript.ru/forum/images/smilies/stop.gif">
          </div>
        </td>
        <td>
          <input type="checkbox" id="cb4" onchange="showOrHide(4);" checked/>
          <br />
          <div id="cat4">
            <img src="http://javascript.ru/forum/images/smilies/angry.gif">
          </div>
        </td>
        <td>
          <input type="checkbox" id="cb5" onchange="showOrHide(5);" checked/>
          <br />
          <div id="cat5">
            <img src="http://javascript.ru/forum/images/smilies/no.gif">
          </div>
        </td>
      </tr>
    </table>
  </body>

</html>

Форум

Справочник

Discord чат

Курсы javascript