Когда должно 100% работать а не работает.
<p>Мини-игра "Угадай число"</p> <p>Введите число <input type="text"> </p> <button class="btn">Угадать</button> <p id="out"></p>
let btn = document.querySelector(".btn");
let out = document.querySelector("#out");
let randomNum = Math.floor(Math.random()*10);
let count = 3;
console.log(randomNum);
btn.onclick = guess;
function guess(){
let inputNum = document.querySelector("input").value;
inputNum = parseInt(inputNum.value);
if(inputNum.value < randomNum){
out.innerHTML = "Больше";
}
else if(inputNum.value > randomNum){
out.innerHTML = "Меньше";
}
else {
out.innerHTML = "Вы угадали";
}
}
|
Не могу понять почему не работает.
|
Сергей Ракипов,
у метода value не бывает метода value! и нет проверки на NaN |
Цитата:
Это я уже в отчаяние начал пробовать все что не попадя, понимая что какой то бред. Про Nan я еще не знаю, но сейчас почитаю |
Цитата:
function guess(){
let inputNum = document.querySelector("input").value;
inputNum = parseInt(inputNum.value);
if (!isNaN(inputNum) && inputNum>=0 && inputNum <=10){
if(inputNum == randomNum){
out.innerHTML = "Вы угадали";
}
else if(inputNum != randomNum){
out.innerHTML = "Вы не угадали";
}
}
}
Вроде сейчас все сделал, все равно не работает И я не понимаю зачем проверку на Nan |
Сергей Ракипов,
строка 3. Цитата:
|
Сергей Ракипов,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p>Мини-игра "Угадай число"</p>
<p>Введите число
<input type="text">
</p>
<button class="btn">Угадать</button>
<p id="out"></p>
<script>
let btn = document.querySelector(".btn");
let out = document.querySelector("#out");
let randomNum = Math.floor(Math.random()*10);
let count = 3;
console.log(randomNum);
btn.onclick = guess;
function guess(){
let inputNum = document.querySelector("input").value;
inputNum = parseInt(inputNum);
if(isNaN(inputNum)){
out.innerHTML = "Введите число";
}
else if(inputNum < randomNum){
out.innerHTML = "Больше";
}
else if(inputNum > randomNum){
out.innerHTML = "Меньше";
}
else {
out.innerHTML = "Вы угадали";
}
}
</script>
</body>
</html>
|
Цитата:
А зачем я проверяю на Nan почему не досточно что я перевел все цифры. |
Цитата:
|
Цитата:
|
Почему у меня не остановился счетчик
let btn = document.querySelector(".btn");
let out = document.querySelector("#out");
let randomNum = Math.round(Math.random()*10);
let remained = document.querySelector("#remained")
remained.innerHTML = "Количество попыток 3";
let count = 3;
console.log(randomNum);
btn.onclick = guess;
function guess(){
let inputNum = document.querySelector("input").value;
inputNum = parseInt(inputNum);
if (!isNaN(inputNum) && inputNum>=0 && inputNum <=10){
if(inputNum < randomNum || count>=0){
out.innerHTML = "Больше";
count--;
remained.innerHTML = "Осталось поптыток: " + count;
}
else if(inputNum > randomNum || count>=0){
out.innerHTML = "Меньше";
count--;
remained.innerHTML = "Осталось поптыток: " + count;
}
else if (inputNum == randomNum){
out.innerHTML = "Вы угадали";
setTimeout(function(){
location.reload();
}, 2000)
}
else if (count<=0){
remained.innerHTML = "Вы проиграли";
setTimeout(function(){
location.reload();
}, 2000)
}
}
}
|
Сергей Ракипов,
условие в строках 19 и 24 не или || , а и &&. |
Цитата:
|
let radioCheck = document.querySelectorAll(".radio");
let outConsol = document.querySelector(".out_console");
function consl(){
for(let i=0; i<radioCheck.length; i++){
if(radioCheck[i].checked){
outConsol.innerHTML = "Ваша консоль- " + radioCheck[i].value;
}
}
}
consl();
Все вроде правильно, но не работает. |
Сергей Ракипов,
делайте полноценный пример.
<!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" checked="checked">
<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");
function consl(){
for(let i=0; i<radioCheck.length; i++){
if(radioCheck[i].checked){
outConsol.innerHTML = "Ваша консоль- " + radioCheck[i].value;
}
}
}
consl();
</script>
</body>
</html>
Пожалуйста, отформатируйте свой код! [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Я просто не вставляю весь кода, думаю зачем людей лишними символами перегружать
Но буду иметь виду И я увидел что вы поставили выбор <input type="radio" value="2" class="radio" name="test" checked="checked"> А у меня этого checked="checked" нет и не надо, мне нужно что бы скрипт отслеживал выбор который сделан пользователем |
Нашел что нужно какой то change но куда его вставить не пойму
|
Сергей Ракипов,
<!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" checked="checked">
<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");
const checkedShow = function() {
outConsol.innerHTML = "Ваша консоль - " + this.value;
}
function consl(){
for(let i=0; i<radioCheck.length; i++){
radioCheck[i].addEventListener("change", checkedShow);
if(radioCheck[i].checked){
checkedShow.bind(radioCheck[i])()
}
}
}
consl();
</script>
</body>
</html>
|
Цитата:
Зачем констатнат? и у меня не будет по умолчанию не чего выбрано. И там есть еще какие то значение |
Цитата:
вместо const checkedShow = function() { можно function checkedShow() { |
Сергей Ракипов,
<!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>
|
Я вот как написал
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}`));
а вот это мне не очень понятно, но напоминает стрелочные функции, я один урок видел но пока не вникал |
Сергей Ракипов,
Перебор: forEach |
<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> если их выбрано не одна то они должны идти в строку. И если чек бокс снят то и игра должна исчезнуть из строки. |
Сергей Ракипов,
<!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>
|
Я кончено благодарю, но это же не коммерческий проект, это я сам себе задачу ставлю и пытаюсь ее решить тем самым учусь, вот вы написали а я не чего не понял
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)
})
Хотя бы в двух словах как это работает |
Сергей Ракипов,
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) // если в вкладке был выбор, выводим актуальный список игр
})
|
Цитата:
|
Сергей Ракипов,
если нет особой необходимости, не копируйте ответ целиком, есть цитирование Цитата выделенного. |
Цитата:
|
Вроде бы не много понял, но понимаю что много еще в чем нужно разобраться.
Я когда сам пробовал, тоже и пуши и массивы использовал, но все не правильно писал. Нужно знать синтаксис и логику, а остальное можно и в справочнике прочесть. Спасибо |
| Часовой пояс GMT +3, время: 21:22. |