Посчитать число элементов по имени в JavaScript | Кодинг

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

.tm-services-panel{}
a.logo_sidebar {
 text-shadow: rgb(198, 109, 88) 1px 1px,
 rgb(199, 110, 89) 2px 2px,
 rgb(200, 111, 89) 3px 3px,
 rgb(201, 111, 90) 4px 4px,
 rgb(203, 112, 90) 5px 5px,
 rgb(204, 113, 91) 6px 6px,
 rgb(205, 113, 91) 7px 7px,
 rgb(206, 114, 92) 8px 8px,
 rgb(208, 115, 93) 9px 9px,
 rgb(209, 115, 93) 10px 10px,
 rgb(210, 116, 94) 11px 11px,
 rgb(211, 117, 94) 12px 12px,
 rgb(212, 117, 95) 13px 13px,
 rgb(214, 118, 95) 14px 14px,
 rgb(215, 119, 96) 15px 15px,
 rgb(216, 119, 96) 16px 16px,
 rgb(217, 120, 97) 17px 17px,
 rgb(219, 121, 98) 18px 18px;
 background-color: rgb(219, 121, 98);
}

.logo_sidebar{
-moz-transition: color 0.8s 0.1s ease;
-o-transition: color 0.8s 0.1s ease;
-webkit-transition: color 0.8s 0.1s ease;}

.logo_sidebar:hover {color: #443F55 !important;}
.layout__topbar_add-question {border-left: 1px solid #5D586A !important;}
.layout__navbar{background:#443F55 !important;}
.logo_sidebar { background:#DB7962 !important;}
.layout__body:before{background:#D9EDF7 !important;}
.panel-heading_inner{background:#D9EDF7 !important;}
.panel-heading__title_underline {border-bottom: 1px solid #443F55 !important;}
.promo-block{background:#5D586A !important;}
input.suggest__field{background:#5D586A !important;}
input.suggest__field:hover{background:#524D5D !important;}

.content-list_sidebar-block .content-list__item {border-color: #cecece;}

.layout__topbar{background:#443F55 !important;}

#progress {position: fixed;
 z-index: 100;
 top: 0;
 left: -6px;
 width: 1%;
 height: 3px;
 background: rgb(198, 206, 22);
 border-radius: 1px; 
 transition: width 500ms ease-out,opacity 400ms linear;
}

a.eTag{font-size:12px;color: #9C7FDA;}
</style>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-G5L7Y5EB18"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

gtag('config', 'G-G5L7Y5EB18');
</script>

@media screen and (max-width: 540px) {
div.dropdown.dropdown_share{display:none;}
}

@media screen and (max-width: 380px) {

a.ulightbox img[align='left'] {margin-right:0px !important;} 
a.ulightbox img[align='right'] {margin-left:0px !important;}
a.ulightbox img[align=''] {float:left !important;margin-right:0px !important;}

a.ulightbox img{width:100% !important;
min-width:100px !important;
height:auto !important;
}

span.hide_btn{display:none;}

.svideo {
 width: 100%;
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}
.svideo iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.demoiframewrapper{margin-top:10px !important;}

.demoiframewrapper{
 background-color: #F8F8F8;
 border-radius:0;
 z-index: 1;
 position: relative;
 margin: 0 0 1.4em 0;
 padding: 0;
 font-size: 0.7em;
}

.demoiframewrapper{
 display:block;
 padding: 10px;
 height:auto;
 font-size: 1em;
}

pre{margin-top:10px !important;margin-bottom:10px !important;border-radius:0px !important;border: 1px solid #A7B3CB;
padding:10px !important;}
div.com-order-block{display:none !important;}

div#bannersbottom img {width: 100%;margin-top: 0px;margin-bottom: 0px;}

.report-spam-wrap{display:none;}

</style>

<li class="menu-services__item" ><a id="googles" class="menu-services__item-link" href="/index/vse_tegi/0-5"> Рубрики </a></li>
 <li class="menu-services__item" ><a id="googles" class="menu-services__item-link" href="/forum/">   Форум  </a></li>
 <li class="menu-services__item"><a id="googles" class="menu-services__item-link" href="/tests/">   Тесты   </a></li>
 <li class="menu-services__item"><a id="googles" class="menu-services__item-link" href="/index/0-8">   Сервисы   </a></li>
 <li class="menu-services__item"><a id="googles" class="menu-services__item-link" href="/news/soderzhanie_sajta/2015-04-03-93"> Содержание </a> </li>

<li class="menu-services__item" ><a id="googles" class="menu-services__item-link" href="/register"> Регистрация </a></li>

</ul>
</div>

<div id="float-sidebar">
<aside class="layout__navbar" role="navbar">
<a style="padding-left:52px;text-align:left;" title="На главную" class="logo logo_sidebar" href="/"><i class="fa fa-university"></i> UpBYTE.NeT</a>

<a title="В начало сайта" class="user-panel__login-link" href="/">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-home"></i>Главная страница</a>

</div>
</section>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/news/0-0-1-0-16-3">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-bar-chart"></i>
 Рейтинг по просмотрам
 </a>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/news/0-0-1-0-16-2">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-thumbs-o-up"></i>
 Рейтинг по оценкам
 </a>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/news/0-0-1-0-16-4">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-comments-o"></i>
 Рейтинг по комментариям
 </a>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/board/">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-users"></i>
 Доска обьявлений
 </a>
 </li>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/forum/">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-users"></i>
 Наш форум
 </a>
 </li>

<li class="main-menu__item">
 <a class="main-menu__link" id="item_questions" href="/tests/">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-check-square-o"></i>
 Пройти тесты
 </a>
 </li>

<li class="main-menu__item">
 <a class="main-menu__link " href="/index/vse_tegi/0-5">
<i style="margin-left:10px;margin-right:14px;" class="fa fa-tag"></i>
 Темы публикаций
 </a>
 </li>

<li class="main-menu__item">
 <a class="main-menu__link " href="/index/calendar/0-7">
<i style="margin-left:10px;margin-right:14px;" class="fa fa-calendar"></i>
 Календарь публикаций
 </a>
 </li>

<li class="main-menu__item">
 <a class="main-menu__link " href="/index/0-8">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-cogs"></i>
 Сервисы сайта
 </a>
 </li>

</ul>

<a title="Зарегистрироваться" class="user-panel__login-link" href="/register">
<i style="margin-left:10px;margin-right:10px;" class="fa fa-user"></i>
Регистрация на сайте</a>

</div>
</section>

<section class="promo-block promo-block_sticky-bottom" style="padding:0px; padding-top:10px;padding-bottom:10px;">
<a class="btn btn_green" target="_blank" href="/mathred/mathred.htm">Редактор формул</a>
</section>
</aside>
</div>

<button class="btn btn_link" type="button">
 <span>Закрыть</span>
 </button>
 </div>
<a title="Поиск" class="btn btn_suggest" href="/index/rasshirennyj_poisk/0-6" data-value="Универсальный поиск" data-title="" data-auth-ret="question/new" data-no-button="">
 <button class="btn btn_suggest" type="button">
 <svg class="icon_svg icon_search" viewBox="0 0 32 32">
 <use xlink:href="/images/sprites.svg#icon_search"></use>
 </svg>
 </button>
</a>
</form>

<div class="layout__topbar_add-question">
<a title="Добавить материалы" class="btn btn_green btn_add-question" href="" data-value="Добавить статью." data-title="" data-auth-ret="question/new" data-no-button="">
<i style="margin-right:4px;" class="fa fa-plus"></i> <span>Добавить запись</span></a>
</div>

</div>
</div>

<div class="layout__topbar_canvas-toggler" style="width:100%;">
<a style="font-size:20px;margin-left:20px;" class="logo logo_topbar" href="/"><i class="fa fa-university"></i> UPBYTE.NET</a>
</div>
</header>

</div>
</div>

</a>

<div class="user-summary__desc"><span style="text-transform: uppercase;color: #9C7FDA;font-size: 12px;font-weight: 700;
 letter-spacing: .5px;
 line-height: 1em;">★ Рубрика:</span> <a class="user-summary__name" href="/news/programmirovanie/1-0-3"> Кодинг</a>

</span>

<div class="user-summary__about">
<span style="text-transform: uppercase;color: #9C7FDA;font-size: 12px;font-weight: 700;
 letter-spacing: .5px;
 line-height: 1em;">★ Тема: </span> <noindex><a href="/search/JavaScript/" rel="nofollow" class="eTag">JavaScript</a></noindex></div>
 </div>
 </div>

</ul>
 </div>
</header>

<h1 class="question__title">Посчитать число элементов по имени в JavaScript</h1>
<div class="question__body">

<div class="question__text" style="text-align:justify;">
В примере показано, как можно посчитать число элементов с именем 'x', использованных в коде скрипта. Для подсчета написана функция getElements().
<br><textarea id="textcode" rows=21 readonly WRAP=virtual><html>
<head>
<script>
function getElements() {
 var x = document.getElementsByName("x");
 document.getElementById("demo").innerHTML = x.length;
}
</script>
</head>
<body>
<p>
Котик: <input name="x" type="radio" value="Cats">
Собака: <input name="x" type="radio" value="Dogs">
Рыбки: <input name="x" type="radio" value="Fish">
</p>
<p>
<input type="button" onclick="getElements()" value="Сколько элементов с именем x?">
</p>
<p id="demo"></p>
</body>
<⁄html>

Котик: Собака: Рыбки:

Похожие публикации: JavaScript

Войти и комментировать [ Вход | Регистрация ]