Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Когда должно 100% работать а не работает. (https://javascript.ru/forum/dom-window/79810-kogda-dolzhno-100%25-rabotat-ne-rabotaet.html)

рони 30.03.2020 18:59
Сергей Ракипов,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<input type="radio" value="1" class="radio" name="test">
<input type="radio" value="2" class="radio" name="test">
<input type="radio" value="3" class="radio" name="test">
<input type="radio" value="4" class="radio" name="test">
<input type="radio" value="5" class="radio" name="test">
<div class="out_console"></div>
<script>
let radioCheck = document.querySelectorAll(".radio");
let outConsol = document.querySelector(".out_console");
radioCheck.forEach(input => input.addEventListener("change", () => outConsol.innerHTML = `Ваша консоль - ${input.value}`));
  </script>
</body>
</html>

Сергей Ракипов 31.03.2020 07:50
Я вот как написал 
let radioCheck = document.querySelectorAll(".radio");
let outConsol = document.querySelector(".out_console");


function checkedShow() {
    outConsol.innerHTML = "Ваша консоль: " + this.value;
}

function consl(){
    for(let i=0; i<radioCheck.length; i++){
        radioCheck[i].addEventListener("change", checkedShow);
    }
}

consl();


И мне понятно, что есть функция которая выводит актуальное значение валье, и есть функция которая перебирает значение и слушает любое событие, и если произошло изменение то запускает функцию 

radioCheck.forEach(input => input.addEventListener("change", () => outConsol.innerHTML = `Ваша консоль - ${input.value}`));


а вот это мне не очень понятно, но напоминает стрелочные функции, я один урок видел но пока не вникал

рони 31.03.2020 08:14
Сергей Ракипов,
Перебор: forEach

Сергей Ракипов 31.03.2020 13:58 
<main>
		<div class="game_console">
			Выберите консоль: <br><br>
			
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="ps4" value="PS4"><div class="stlradio"></div><div class="name"> <label for="ps4">PS4</label></div>
			</div>
			
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="xbox" value="X-box"> <div class="stlradio"></div><div class="name"> <label for="xbox">X-box</label></div>
			</div>
			
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="nindendo" value="Nindendo"><div class="stlradio"></div><div class="name"> <label for="nindendo">Nindendo</label></div>
			</div>
			
		</div>
		<br>
		<div class="out_console"></div><br>
		<div class="out_select_game"></div>
		<br><br>
		<div class="out_game"></div>
		<br>
		<div class="all_game">
			<div class="game_ps">
				<label for="game_1">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_1" value="God of War"><div class="stlchek"></div><div class="name"> God of War</div>
				</div>
				</label>
				<label for="game_2">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_2" value="Uncharted 4"> <div class="stlchek"></div><div class="name"> Uncharted 4</div>
				</div>
				</label>
				<label for="game_3">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_3" value="BloodBorne"><div class="stlchek"></div><div class="name"> BloodBorne</div>
				</div>
				</label>
			</div>
			<div class="game_xb">
				<label for="game_4">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_4" value="Gears 5"><div class="stlchek"></div> <div class="name">Gears 5</div>
				</div>
				</label>
				<label for="game_5">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_5" value="Halo Infinite"><div class="stlchek"></div> <div class="name">Halo Infinite</div>
				</div>
				</label>
				<label for="game_6">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_6" value="Cuphead"><div class="stlchek"></div><div class="name"> Cuphead</div>
				</div>
				</label>
			</div>
			<div class="game_nin">
				<label for="game_7">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_7" value="Zelda"><div class="stlchek"></div><div class="name"> Zelda</div>
				</div>
				</label>
				<label for="game_8">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_8" value="Yoshi's"><div class="stlchek"></div><div class="name"> Yoshi's</div>
				</div>
				</label>
				<label for="game_9">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_9" value="Mario Odyssey"><div class="stlchek"></div> <div class="name">Mario Odyssey</div>
				</div>
				</label>
			</div>
		</div>
	</main>



main{
	max-width: 720px;
	margin: 0 auto;
}
label{
	cursor: pointer;
}
label:hover{
	color: #03A5D;
}
input[type=radio] {
	display: none;
}
input[type=checkbox] {
	display: none;
}
.stlradio {
    display: inline-block;
    border: 1px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
    border-radius: 300px;
    background-color:#ffffff;
}
.stlradio:before {
    content: "";
    background: #03A5D7;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 300px;
}

input:checked + .stlradio:before {
    opacity: 1;
}
.stlchek {
    display: inline-block;
    border: 1px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
}
.stlchek:before {
    content: "";
    background: #03A5D7;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
}
input:checked + .stlchek:before {
    opacity: 1;
}
.name{
display: inline-block;
}
.name:hover{
	color: #03A5D7;
}
.align_game{
	display:flex;
	align-items: center;
}

.align{
	display: inline-flex;
	align-items: center;
	margin: 0px 5px 0px 5px;
}
.all_game{
	position: relative;
}
.game_ps {
	position:absolute;
	display: none;
}

.game_xb {
	position:absolute;
	display: none;

}

.game_nin {
	position:absolute;
	display: none;
}



let radioCheck = document.querySelectorAll(".radio");
let box = document.querySelectorAll(".box");
let outConsol = document.querySelector(".out_console");
let outGame = document.querySelector(".out_game");
let outSelectGame = document.querySelector(".out_select_game");
let gamePs = document.querySelector(".game_ps");
let gameXb = document.querySelector(".game_xb");
let gameNin = document.querySelector(".game_nin");

function checkedShow() {
    outConsol.innerHTML = "Ваша консоль: " + this.value;
}

function consl(){
    for(let i=0; i<radioCheck.length; i++){
        radioCheck[i].addEventListener("change", checkedShow);
    }
	
}
consl();

function selectedRadioButton(){
	for(let i=0; i<radioCheck.length; i++){
		if(radioCheck[0].checked){
			gamePs.style.display = "block";
			gameXb.style.display = "none";
			gameNin.style.display = "none";
			outGame.innerHTML = "Эксклюзивы для PS4"
		}
		else if(radioCheck[1].checked){
			gamePs.style.display = "none";
			gameXb.style.display = "block";
			gameNin.style.display = "none";
			outGame.innerHTML = "Эксклюзивы для X-box"
		}
		else if(radioCheck[2].checked){
			gamePs.style.display = "none";
			gameXb.style.display = "none";
			gameNin.style.display = "block";
			outGame.innerHTML = "Эксклюзивы для Nindendo"
		}
	}
}

function gameAll(){
    for(let i=0; i<radioCheck.length; i++){
        radioCheck[i].addEventListener("change", selectedRadioButton);
    }
	
}
gameAll();



Все что мог попробовать не получается реализовать следующее.

Нужно что бы при выборе игры, она выводилась <div class="out_select_game"></div> если их выбрано не одна то они должны идти в строку. И если чек бокс снят то и игра должна исчезнуть из строки.

рони 31.03.2020 15:23
Сергей Ракипов,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  main{
	max-width: 720px;
	margin: 0 auto;
}
label{
	cursor: pointer;
}
label:hover{
	color: #03A5D;
}
input[type=radio] {
	display: none;
}
input[type=checkbox] {
	display: none;
}
.stlradio {
    display: inline-block;
    border: 1px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
    border-radius: 300px;
    background-color:#ffffff;
}
.stlradio:before {
    content: "";
    background: #03A5D7;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 300px;
}
input:checked + .stlradio:before {
    opacity: 1;
}
.stlchek {
    display: inline-block;
    border: 1px solid #b2b1b1;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 4px;
}
.stlchek:before {
    content: "";
    background: #03A5D7;
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
}
input:checked + .stlchek:before {
    opacity: 1;
}
.name{
display: inline-block;
}
.name:hover{
	color: #03A5D7;
}
.align_game{
	display:flex;
	align-items: center;
}
.align{
	display: inline-flex;
	align-items: center;
	margin: 0px 5px 0px 5px;
}
.all_game{
	position: relative;
}
.game_ps {
	position:absolute;
	display: none;
}
.game_xb {
	position:absolute;
	display: none;
}
.game_nin {
	position:absolute;
	display: none;
}
.all_game > div.open{
    display: block;
}
  </style>
</head>
<body>
<main>
		<div class="game_console">
			Выберите консоль: <br><br>
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="ps4" value="PS4"><div class="stlradio"></div><div class="name"> <label for="ps4">PS4</label></div>
			</div>
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="xbox" value="X-box"> <div class="stlradio"></div><div class="name"> <label for="xbox">X-box</label></div>
			</div>
			<div class="align_game">
				<input type="radio" name="console" class="radio" id="nindendo" value="Nindendo"><div class="stlradio"></div><div class="name"> <label for="nindendo">Nindendo</label></div>
			</div>
		</div>
		<br>
		<div class="out_console"></div><br>
		<div class="out_select_game"></div>
		<br><br>
		<div class="out_game"></div>
		<br>
		<div class="all_game">
			<div class="game_ps">
				<label for="game_1">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_1" value="God of War"><div class="stlchek"></div><div class="name"> God of War</div>
				</div>
				</label>
				<label for="game_2">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_2" value="Uncharted 4"> <div class="stlchek"></div><div class="name"> Uncharted 4</div>
				</div>
				</label>
				<label for="game_3">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_3" value="BloodBorne"><div class="stlchek"></div><div class="name"> BloodBorne</div>
				</div>
				</label>
			</div>
			<div class="game_xb">
				<label for="game_4">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_4" value="Gears 5"><div class="stlchek"></div> <div class="name">Gears 5</div>
				</div>
				</label>
				<label for="game_5">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_5" value="Halo Infinite"><div class="stlchek"></div> <div class="name">Halo Infinite</div>
				</div>
				</label>
				<label for="game_6">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_6" value="Cuphead"><div class="stlchek"></div><div class="name"> Cuphead</div>
				</div>
				</label>
			</div>
			<div class="game_nin">
				<label for="game_7">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_7" value="Zelda"><div class="stlchek"></div><div class="name"> Zelda</div>
				</div>
				</label>
				<label for="game_8">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_8" value="Yoshi's"><div class="stlchek"></div><div class="name"> Yoshi's</div>
				</div>
				</label>
				<label for="game_9">
				<div class="align">
					<input type="checkbox" class="stlchek box" id="game_9" value="Mario Odyssey"><div class="stlchek"></div> <div class="name">Mario Odyssey</div>
				</div>
				</label>
			</div>
		</div>
	</main>
<script>
var index = 0;
var game = document.querySelectorAll('.all_game > div');
function gamesSelectedShow() {
    var nameGames = [];
    game[index].querySelectorAll('input').forEach(function(input) {
        if (input.checked) nameGames.push(input.value)
    })
    document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!';
}
function consoleSelectedShow() {
    game.forEach(function(div, i) {
        div.classList.toggle('open', i === index)
    })
}
document.querySelectorAll('[name="console"]').forEach(function(console, i) {
    console.addEventListener('change', function() {
        document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value;
        index = i;
        consoleSelectedShow();
        gamesSelectedShow();
    })
})
game.forEach(function(div) {
    div.addEventListener('change', gamesSelectedShow)
})
</script>
</body>
</html>

Сергей Ракипов 31.03.2020 16:25
Я кончено благодарю, но это же не коммерческий проект, это я сам себе задачу ставлю и пытаюсь ее решить тем самым учусь, вот вы написали а я не чего не понял 

var index = 0;

var game = document.querySelectorAll('.all_game > div');

function gamesSelectedShow() {

    var nameGames = [];

    game[index].querySelectorAll('input').forEach(function(input) {

        if (input.checked) nameGames.push(input.value)

    })

    document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!';

}

function consoleSelectedShow() {

    game.forEach(function(div, i) {

        div.classList.toggle('open', i === index)

    })

}

document.querySelectorAll('[name="console"]').forEach(function(console, i) {

    console.addEventListener('change', function() {

        document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value;

        index = i;

        consoleSelectedShow();

        gamesSelectedShow();

    })

})

game.forEach(function(div) {

    div.addEventListener('change', gamesSelectedShow)
})


Хотя бы в двух словах как это работает

рони 31.03.2020 17:05
Сергей Ракипов,
forEach тоже for, но гораздо удобнее.

var index = 0;// номер открытой вкладки с названиями игр

var game = document.querySelectorAll('.all_game > div'); // массив вкладок

function gamesSelectedShow() {  //сбор названий игр в открытой  вкладке

    var nameGames = []; //массив для названий

    game[index].querySelectorAll('input').forEach(function(input) { //цикл по всем инпутам в открытой вкладке

        if (input.checked) nameGames.push(input.value) // если стоит галочка, сохранияем имя игры в массив имён

    })

    document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!';
   // выводим имена если они есть(длина массива не ноль) иначе надпись Сделайте выбор
}

function consoleSelectedShow() {// обходим все  вкладки, добавляем, если номер вкладки совпадаем с индексом консоли,  или убираем класс open
    // этот класс открывает вкладку  .all_game > div.open{ display: block;}
    game.forEach(function(div, i) {

        div.classList.toggle('open', i === index)

    })

}

document.querySelectorAll('[name="console"]').forEach(function(console, i) { //обходим все кнопки для выбора консоли
     // на кнопку ставим обработчик
    console.addEventListener('change', function() {
        //если нажали на кнопку, выводим значение этой кнопки
        document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value;

        index = i;// меняем индекс для открывания вкладки

        consoleSelectedShow(); // открываем вкладку с нужным индексом

        gamesSelectedShow(); // смотрим есть ли выбранные названия в открытой вкладке

    })

})

game.forEach(function(div) {  // ставим обработку на каждую вкладку

    div.addEventListener('change', gamesSelectedShow) // если в вкладке был выбор, выводим актуальный список игр
})

Сергей Ракипов 31.03.2020 17:09
Цитата:
Сообщение от рони (Сообщение 521978)
Сергей Ракипов,
forEach тоже for, но гораздо удобнее.

var index = 0;// номер открытой вкладки с названиями игр

var game = document.querySelectorAll('.all_game > div'); // массив вкладок

function gamesSelectedShow() {  //сбор названий игр в открытой  вкладке

    var nameGames = []; //массив для названий

    game[index].querySelectorAll('input').forEach(function(input) { //цикл по всем инпутам в открытой вкладке

        if (input.checked) nameGames.push(input.value) // если стоит галочка, сохранияем имя игры в массив имён

    })

    document.querySelector('.out_select_game').innerHTML = nameGames.length ? nameGames : 'Сделайте выбор!';
   // выводим имена если они есть(длина массива не ноль) иначе надпись Сделайте выбор
}

function consoleSelectedShow() {// обходим все  вкладки, добавляем, если номер вкладки совпадаем с индексом консоли,  или убираем класс open
    // этот класс открывает вкладку  .all_game > div.open{ display: block;}
    game.forEach(function(div, i) {

        div.classList.toggle('open', i === index)

    })

}

document.querySelectorAll('[name="console"]').forEach(function(console, i) { //обходим все кнопки для выбора консоли
     // на кнопку ставим обработчик
    console.addEventListener('change', function() {
        //если нажали на кнопку, выводим значение этой кнопки
        document.querySelector('.out_console').innerHTML = 'Ваша консоль: ' + console.value;

        index = i;// меняем индекс для открывания вкладки

        consoleSelectedShow(); // открываем вкладку с нужным индексом

        gamesSelectedShow(); // смотрим есть ли выбранные названия в открытой вкладке

    })

})

game.forEach(function(div) {  // ставим обработку на каждую вкладку

    div.addEventListener('change', gamesSelectedShow) // если в вкладке был выбор, выводим актуальный список игр
})
спасибо завтра буду разбираться, на сегодня голова уже не варит

рони 31.03.2020 17:17
Сергей Ракипов,
если нет особой необходимости, не копируйте ответ целиком, есть цитирование Цитата выделенного.

Сергей Ракипов 01.04.2020 07:47
Цитата:
Сообщение от рони
Цитата выделенного
Хорошо, я понял


Часовой пояс GMT +3, время: 10:48.
Страница 3 из 4 < 12 3 4 >
Показывать 40 сообщений этой темы на одной странице