.getElementsByClassName() возвращает коллекцию, а getElementByID непосредственно сам элемент.document.getElementsByClassName("menu_1")[0].addEventListener("click", openMenu);<label>, событие клика срабатывает два раза, на непосредственно самом <label> и на <input/> (но обработчик, который висит на <label> все равно его ловит, ибо всплытие), поэтому класс active добавляется и сразу же удаляется. Хотя если кликать непосредственно на сам <input/>, то клик на <label> не будет генерироваться, и класс на<label> будет меняться как и задумано. Выхода я вижу как минимум два:click, а change на <input> и если :checked то меням классinput.addEventListener(function(e){
if (!e.target.checked) {
$(label).addClass('active');
return;
}
if (e,target.cheked) {
$(label).removeClass('active');
return;
}
});<label>
<input type="checkbox">
<span>home</span>
</label>input:checked + span {
color: red;
}.getElementsByClassName() возвращает коллекцию элементов (button). Нужно пройтись циклом по этой колекции и каждой button повесить обработчик onclickArray.prototype.forEach.call(b, function(button) {
button.onclick = function(){
alert('Клик!');
}
});function spaceDigits(number){
return number.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
}
document.querySelectorAll('.stats_counter').forEach(function(el) {
el.innerText = spaceDigits(el.innerText);
});<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/i18n/Russian.json"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</head>$(document).on('ajaxA', () => {
console.log('ajaxA is complete');
});
ajaxA();
ajaxB();
ajaxC();
function ajaxA() {
$.ajax({
...
success() {
$(document).trigger('ajaxA');
}
...
});
}
function ajaxB() {
$.ajax(...);
}
function ajaxC() {
$.ajax(...);
}var input = document.getElementById('input')[0]; // неправильно
var input = document.getElementById('input'); // правильноinput.addEventListener('onkeyup', function() {...}); // неправильно
input.addEventListener('keyup', function() {...}); // правильно<tr id="anchor">...</tr><nav>
...
<a href="#el_721">el_721</a>
<a href="#el_722">el_722</a>
<a href="#el_723">el_723</a>
...
</nav>
<table>
<tbody>
...
<tr id="el_721">
<td>el_721</td>
<td>el_721</td>
</tr>
<tr id="el_722">
<td>el_722</td>
<td>el_722</td>
</tr>
<tr id="el_723">
<td>el_723</td>
<td>el_723</td>
</tr>
...
</tbody>
</table>var $ = require('jquery');
require('jquery-ui/ui/widgets/slider');
$('#id').slider();<a href="input.html?val=1">1</a>
<a href="input.html?val=2">2</a>
<a href="input.html?val=3">3</a>
<a href="input.html?val=4">4</a><input type="text">
<script>
function parseUrlParams() {
let res = {};
window.location.search.replace(/^\?/, '').split('&').forEach((param) => {
param = param.split('=');
res[param[0]] = decodeURIComponent(param[1]);
});
return res;
}
document.querySelector('input').value = parseUrlParams().val;
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
.block {
width: 200px;
height: 200px;
background-color: magenta;
display: none;
}
.block.open { display: block }
</style>
</head>
<body>
<button>кнопка</button>
<div class="block">asd</div>
<script>
(() => {
const block = document.querySelector('.block');
const button = document.querySelector('button');
function toggle() {
block.classList.toggle('open');
}
function remove() {
block.classList.remove('open');
}
document.addEventListener('click', e => {
const target = e.target;
target === button ? toggle() : target !== block ? remove() : false;
});
})();
</script>
</body>
</html>const target = document.querySelector('.target');
const fragment = document.createDocumentFragment();
// create data
const data = ((arr) => {
for(let i = 0; i < 100000; i++) {
arr.push(`string${i}`);
}
return arr;
})([]);
data.forEach((string) => {
const div = document.createElement('div');
div.textContent = string;
fragment.appendChild(div);
});
target.appendChild(fragment);