Неправильно при нажатии на энтер выводиться попап
При нажатии на кнопку все выводится корректно(попап с надписью правильно\не правильно) а если нажать на поле input то тогда все время будет вылезать попап "не правильно" даже если ответ правильный.
// сложение
const addition = document.querySelector('.addition'),
additionInput = addition.querySelector('.addition > input'),
additionBtn = addition.querySelector('.addition-btn'),
numAddition1 = addition.querySelector('.num__addition-1'),
numAddition2 = addition.querySelector('.num__addition-2');
// вычитание
const subtraction = document.querySelector('.subtraction'),
subtractionInput = subtraction.querySelector('.subtraction > input'),
subtractionBtn = subtraction.querySelector('.subtraction-btn'),
numSubtraction1 = subtraction.querySelector('.num__subtraction-1'),
numSubtraction2 = subtraction.querySelector('.num__subtraction-2');
// умножение
const multiplication = document.querySelector('.multiplication'),
multiplicationInput = multiplication.querySelector('.multiplication > input'),
numMultiplication1 = multiplication.querySelector('.num__multiplication-1'),
numMultiplication2 = multiplication.querySelector('.num__multiplication-2'),
multiplicationBtn = multiplication.querySelector('.multiplication-btn');
// попап
const popupMask = document.querySelector('.popup-mask'),
popupInfo = popupMask.querySelector('.popup-info'),
popup = popupMask.querySelector('.popup');
popupMask.addEventListener('click', function () {
popupMask.classList.add('hidden');
});
function successAnswer() {
popupMask.classList.remove('hidden');
popupMask.classList.add('show');
popupInfo.innerHTML = 'Правильно, молодец!';
popup.classList.remove('errorOption');
popup.classList.add('successOption');
setTimeout(() => {
location.reload();
}, 3000);
popupMask.addEventListener('click', function () {
location.reload();
});
}
function errorAnswer() {
popupMask.classList.remove('hidden');
popupMask.classList.add('show');
popupInfo.innerHTML = 'Не правильно, <br/>Подумай еще.';
popup.classList.add('errorOption');
setTimeout(() => {
popupMask.classList.add('hidden');
}, 3000);
}
function enterBtn(btn, input, res) {
document.addEventListener('keyup', function (e) {
e = e || window.event;
if (e.keyCode == 13) {
// моя 1я попытка - не получилась
btn.click();
// моя 2я попытка - не получилась
if (res == input.value) {
return successAnswer();
} else {
return errorAnswer();
}
// моя 3я попытка - не получилась
if (res !== input.value) {
return errorAnswer();
} else {
return successAnswer();
}
// моя 4я попытка - не получилась
if (res == input.value) {
btn.click();
successAnswer();
} else if(res == input.value) {
btn.click();
errorAnswer();
}
}
});
}
// сложение
function randomNumberAddition() {
let n1 = (Math.floor(Math.random() * 100) + 1);
let n2 = (Math.floor(Math.random() * 100) + 1);
let res = n1 + n2;
numAddition1.innerHTML = n1;
numAddition2.innerHTML = n2;
let num1 = (Math.floor(Math.random() * 100) + 1);
let num2 = (Math.floor(Math.random() * 100) + 1);
additionBtn.addEventListener('click', function () {
if (res == additionInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__addition');
answer.onclick = function () {
answer.innerHTML = res;
};
enterBtn(additionBtn, additionInput, res);
console.log(res);
}
randomNumberAddition();
// вычитание
function randomNumberSubtraction() {
let n1 = (Math.floor(Math.random() * 100) + 196);
let n2 = (Math.floor(Math.random() * 100) + 13);
let res = n1 - n2;
numSubtraction1.innerHTML = n1;
numSubtraction2.innerHTML = n2;
subtractionBtn.addEventListener('click', function () {
if (res == subtractionInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__subtraction');
answer.onclick = function () {
answer.innerHTML = res;
};
enterBtn(subtractionBtn, subtractionInput, res);
console.log(res);
}
randomNumberSubtraction();
// умножение
function randomNumberMultiplication() {
let n1 = (Math.floor(Math.random() * 12) + 1);
let n2 = (Math.floor(Math.random() * 12) + 1);
let res = n1 * n2;
numMultiplication1.innerHTML = n1;
numMultiplication2.innerHTML = n2;
multiplicationBtn.addEventListener('click', function () {
if (res == multiplicationInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__multiplication');
answer.onclick = function () {
answer.innerHTML = res;
};
enterBtn(multiplicationBtn, multiplicationInput, res);
console.log(res);
}
randomNumberMultiplication();
.answer--style {
cursor: pointer;
color: rgb(18, 185, 93);
display: inline-block;
}
.answer--style img {
width: 25px;
height: 25px;
}
.answer--style img:hover {
border: 2px solid #fff;
border-radius: 50%;
background-color: rgb(144, 43, 226);
}
.answer--style:hover {
color: rgb(18, 185, 93);
}
.popup-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.623);
z-index: 1;
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: .3s linear;
}
.popup-mask.show {
opacity: 1;
overflow: visible;
visibility: visible;
transition: .3s linear;
}
.popup-mask.hidden {
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: .3s linear;
}
.popup {
width: 30%;
height: 40%;
border-radius: 43% 57% 62% 38% / 27% 49% 51% 73%;
position: relative;
top: 30px;
left: 66%;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);
/* -webkit-box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2);
box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2); */
}
.popup.successOption {
background-image: linear-gradient(5deg,
hsl(171deg 75% 28%) 0%,
hsl(164deg 100% 27%) 24%,
hsl(153deg 100% 29%) 35%,
hsl(135deg 81% 34%) 45%,
hsl(139deg 81% 38%) 55%,
hsl(160deg 100% 40%) 65%,
hsl(171deg 100% 45%) 76%,
hsl(179deg 100% 50%) 100%);
color: #fff;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 20px;
}
.popup.errorOption {
background-image: linear-gradient(345deg,
hsl(0deg 85% 35%) 0%,
hsl(322deg 100% 23%) 33%,
hsl(321deg 100% 27%) 67%,
hsl(0deg 78% 51%) 100%);
color: #fff;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 20px;
}
.popup-info {
line-height: 30px;
}
<div class="popup-mask">
<div class="popup">
<div class="popup-info">jfeor</div>
</div>
</div>
<!-- сложение -->
<div class="addition">
<span class="num__addition-1"></span>
<span>+</span>
<span class="num__addition-2"></span>
<input type="text">
<input type="submit" class="addition-btn" value="Ответить">
</form>
<div class="answer__addition answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>
<!-- вычитание -->
<div class="subtraction">
<span class="num__subtraction-1"></span>
<span>-</span>
<span class="num__subtraction-2"></span>
<input type="text">
<button class="subtraction-btn">Ответить</button>
<div class="answer__subtraction answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>
<!-- умножение -->
<div class="multiplication">
<span class="num__multiplication-1"></span>
<span>*</span>
<span class="num__multiplication-2"></span>
<input type="text">
<button type="submit" class="multiplication-btn">Ответить</button>
<div class="answer__multiplication answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>
Ответы (1 шт):
Автор решения: Andrey Semykin
→ Ссылка
// сложение
const addition = document.querySelector('.addition'),
additionInput = addition.querySelector('.addition > input'),
additionBtn = addition.querySelector('.addition-btn'),
numAddition1 = addition.querySelector('.num__addition-1'),
numAddition2 = addition.querySelector('.num__addition-2');
// вычитание
const subtraction = document.querySelector('.subtraction'),
subtractionInput = subtraction.querySelector('.subtraction > input'),
subtractionBtn = subtraction.querySelector('.subtraction-btn'),
numSubtraction1 = subtraction.querySelector('.num__subtraction-1'),
numSubtraction2 = subtraction.querySelector('.num__subtraction-2');
// умножение
const multiplication = document.querySelector('.multiplication'),
multiplicationInput = multiplication.querySelector('.multiplication > input'),
numMultiplication1 = multiplication.querySelector('.num__multiplication-1'),
numMultiplication2 = multiplication.querySelector('.num__multiplication-2'),
multiplicationBtn = multiplication.querySelector('.multiplication-btn');
// попап
const popupMask = document.querySelector('.popup-mask'),
popupInfo = popupMask.querySelector('.popup-info'),
popup = popupMask.querySelector('.popup');
popupMask.addEventListener('click', function () {
popupMask.classList.add('hidden');
});
function successAnswer() {
popupMask.classList.remove('hidden');
popupMask.classList.add('show');
popupInfo.innerHTML = 'Правильно, молодец!';
popup.classList.remove('errorOption');
popup.classList.add('successOption');
setTimeout(() => {
location.reload();
}, 3000);
popupMask.addEventListener('click', function () {
location.reload();
});
}
function errorAnswer() {
popupMask.classList.remove('hidden');
popupMask.classList.add('show');
popupInfo.innerHTML = 'Не правильно, <br/>Подумай еще.';
popup.classList.add('errorOption');
setTimeout(() => {
popupMask.classList.add('hidden');
}, 3000);
}
function enterBtn(btn, input, res) {
document.addEventListener('keyup', function (e) {
e = e || window.event;
if (e.keyCode == 13) {
// моя 1я попытка - не получилась
btn.click();
// моя 2я попытка - не получилась
if (res == input.value) {
return successAnswer();
} else {
return errorAnswer();
}
// моя 3я попытка - не получилась
if (res !== input.value) {
return errorAnswer();
} else {
return successAnswer();
}
// моя 4я попытка - не получилась
if (res == input.value) {
btn.click();
successAnswer();
} else if(res == input.value) {
btn.click();
errorAnswer();
}
}
});
}
// сложение
function randomNumberAddition() {
let n1 = (Math.floor(Math.random() * 100) + 1);
let n2 = (Math.floor(Math.random() * 100) + 1);
let res = n1 + n2;
numAddition1.innerHTML = n1;
numAddition2.innerHTML = n2;
let num1 = (Math.floor(Math.random() * 100) + 1);
let num2 = (Math.floor(Math.random() * 100) + 1);
additionBtn.addEventListener('click', function () {
if (res == additionInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__addition');
answer.onclick = function () {
answer.innerHTML = res;
};
// enterBtn(additionBtn, additionInput, res);
additionInput.addEventListener('keyup', function (e) {
e = e || window.event;
if (e.keyCode == 13) additionBtn.click();
});
console.log(res);
}
randomNumberAddition();
// вычитание
function randomNumberSubtraction() {
let n1 = (Math.floor(Math.random() * 100) + 196);
let n2 = (Math.floor(Math.random() * 100) + 13);
let res = n1 - n2;
numSubtraction1.innerHTML = n1;
numSubtraction2.innerHTML = n2;
subtractionBtn.addEventListener('click', function () {
if (res == subtractionInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__subtraction');
answer.onclick = function () {
answer.innerHTML = res;
};
// enterBtn(subtractionBtn, subtractionInput, res);
subtractionInput.addEventListener('keyup', function (e) {
e = e || window.event;
if (e.keyCode == 13) subtractionBtn.click();
});
console.log(res);
}
randomNumberSubtraction();
// умножение
function randomNumberMultiplication() {
let n1 = (Math.floor(Math.random() * 12) + 1);
let n2 = (Math.floor(Math.random() * 12) + 1);
let res = n1 * n2;
numMultiplication1.innerHTML = n1;
numMultiplication2.innerHTML = n2;
multiplicationBtn.addEventListener('click', function () {
if (res == multiplicationInput.value) {
successAnswer();
} else {
errorAnswer();
}
});
let answer = document.querySelector('.answer__multiplication');
answer.onclick = function () {
answer.innerHTML = res;
};
// enterBtn(multiplicationBtn, multiplicationInput, res);
multiplicationInput.addEventListener('keyup', function (e) {
e = e || window.event;
if (e.keyCode == 13) multiplicationBtn.click();
});
console.log(res);
}
randomNumberMultiplication();
.answer--style {
cursor: pointer;
color: rgb(18, 185, 93);
display: inline-block;
}
.answer--style img {
width: 25px;
height: 25px;
}
.answer--style img:hover {
border: 2px solid #fff;
border-radius: 50%;
background-color: rgb(144, 43, 226);
}
.answer--style:hover {
color: rgb(18, 185, 93);
}
.popup-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.623);
z-index: 1;
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: .3s linear;
}
.popup-mask.show {
opacity: 1;
overflow: visible;
visibility: visible;
transition: .3s linear;
}
.popup-mask.hidden {
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: .3s linear;
}
.popup {
width: 30%;
height: 40%;
border-radius: 43% 57% 62% 38% / 27% 49% 51% 73%;
position: relative;
top: 30px;
left: 66%;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);
/* -webkit-box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2);
box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2); */
}
.popup.successOption {
background-image: linear-gradient(5deg,
hsl(171deg 75% 28%) 0%,
hsl(164deg 100% 27%) 24%,
hsl(153deg 100% 29%) 35%,
hsl(135deg 81% 34%) 45%,
hsl(139deg 81% 38%) 55%,
hsl(160deg 100% 40%) 65%,
hsl(171deg 100% 45%) 76%,
hsl(179deg 100% 50%) 100%);
color: #fff;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 20px;
}
.popup.errorOption {
background-image: linear-gradient(345deg,
hsl(0deg 85% 35%) 0%,
hsl(322deg 100% 23%) 33%,
hsl(321deg 100% 27%) 67%,
hsl(0deg 78% 51%) 100%);
color: #fff;
letter-spacing: 1.5px;
font-weight: bold;
font-size: 20px;
}
.popup-info {
line-height: 30px;
}
<div class="popup-mask">
<div class="popup">
<div class="popup-info">jfeor</div>
</div>
</div>
<!-- сложение -->
<div class="addition">
<span class="num__addition-1"></span>
<span>+</span>
<span class="num__addition-2"></span>
<input type="text">
<input type="submit" class="addition-btn" value="Ответить">
</form>
<div class="answer__addition answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>
<!-- вычитание -->
<div class="subtraction">
<span class="num__subtraction-1"></span>
<span>-</span>
<span class="num__subtraction-2"></span>
<input type="text">
<button class="subtraction-btn">Ответить</button>
<div class="answer__subtraction answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>
<!-- умножение -->
<div class="multiplication">
<span class="num__multiplication-1"></span>
<span>*</span>
<span class="num__multiplication-2"></span>
<input type="text">
<button type="submit" class="multiplication-btn">Ответить</button>
<div class="answer__multiplication answer--style"><img src="img/answer.png" alt="Watch"></div>
</div>