How to solve the problem with modal Windows?

0 like 0 dislike
6 views
Hello. Write typing tutor, which when capslock is enabled or not the layout displays a modal window informing about it. But when testing I got this problem: if you first enter on the wrong layout, the corresponding dialog box would work, but if you first type something with caps, displays a window notifying of this and all subsequent Windows, regardless of the problems, will display a window of CAPSA would appreciate it if you point out the error in code or offer a solution to this problem
link to jsfiddle

<!DOCTYPE html>TyperWrong layout!Continue


//Function that receives a keypress // event.type must be keypress function getChar(event) { if (event.which == null) { // IE if (event.keyCode < 32) return null; // spec. symbol return String.fromCharCode(event.keyCode) } if (event.which != 0 && event.charCode != 0) { // all except IE if (event.which < 32) return null; // spec. symbol return String.fromCharCode(event.which); // rest } return null; // spec. symbol } isCyrillic function(text) { //function that checks for the Cyrillic alphabet return /[a-z]/i.test(text); } modalCloseWithEnter function () { //close modal by pressing enter if (event.keyCode == 13 && event.type == "keydown") { document.getElementById("wrap").style.display = "none"; document.getElementById("alertWindow").style.display = "none"; document.addEventListener("keypress", checkKeyEvent); } document.removeEventListener("keydown", modalCloseWithEnter); } function modalClose() { //Close the modal window by clicking on the button document.getElementById("wrap").style.display = "none"; document.getElementById("alertWindow").style.display = "none"; document.addEventListener("keypress", checkKeyEvent); } var capsLockEnabled; document.addEventListener('keydown', function(event) { var caps = event.getModifierState && event.getModifierState('CapsLock'); capsLockEnabled = caps; }); //Main function. Does everything you want var counterLetters = 0; var levelText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere tellus at leo mollis et, vel".toLowerCase(); text.innerHTML = levelText; let mistakesCounter = 0; //error Counter mistakes.innerHTML = ("number of errors:" + mistakesCounter); checkKeyEvent function() { var keyName = getChar(event); if (isCyrillic(keyName)) { //print the message about not the correct layout document.getElementById("wrap").style.display = "inline-block"; document.getElementById("alertWindow").style.display = "inline-block"; document.removeEventListener("keypress", checkKeyEvent); document.addEventListener("keydown", modalCloseWithEnter); } else if(levelText[counterLetters] == keyName){ console.log("character Entered"); //just checking levelText = levelText.substring(1); text.innerHTML = levelText; } else if (capsLockEnabled && keyName != null) { var modalWindowCaps = document.getElementById("alertWindowText"); modalWindowCaps.innerHTML = ("CapsLock Enabled!"); document.getElementById("wrap").style.display = "inline-block"; document.getElementById("alertWindow").style.display = "inline-block"; document.removeEventListener("keypress", checkKeyEvent); document.addEventListener("keydown", modalCloseWithEnter); } else if (keyName == null) { //do nothing console.log("you Clicked on the spec. key"); } else { console.log("you Entered wrong character"); //here would be code to notify about the error mistakesCounter++; mistakes.innerHTML = ("number of errors:" + mistakesCounter); } } document.addEventListener("keypress", checkKeyEvent);


body { margin: 0px; background-color: #4BABE7; } #alertText { color: red; font-family: 'Source Sans Pro', sans-serif; font-size: 19pt; } #alertWindowText { width: 450px; height: 70px; background-color: #fff; opacity: 1; border-radius: 15px 15px 0 0; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 22pt; padding-top: 30px; } #alertWindowButtons { width: 450px; height: 70px; background-color: #F4F4F4; border-radius: 0 0 15px 15px; text-align: center; padding-top: 20px; } #button24 { display: inline-block; color: white; text-decoration: none; padding: .7em 4em; outline: none; border-width: 2px 0; border-style: solid none; border-color: #FDBE33 #000 #D77206; border-radius: 6px; background: linear-gradient(#F3AE0F, #E38916) #E38916; transition: 0.2 s; font-family: 'Source Sans Pro', sans-serif; } #button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; } #button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; } #wrap { height: 100%; width: 100%; opacity: 0.7; background-color: black; position: absolute; z-index: 1; display: none; } #alertWindow { transform: translate(450px, 30px); display: none; position: absolute; z-index: 1; } #main { width: 1366px; height: 510px; background-color: #4BABE7; } #field { background-color: white; margin-left: 150px; margin-right: 150px; border-radius: 20px; transform: translate(0, 110px); padding-top: 30px; padding-bottom: 30px; padding-right: 40px; padding-left: 40px; } #text { font-family: 'Source Sans Pro', sans-serif; font-size: 18pt; } #mistakes { font-family: 'PT Sans Narrow', sans-serif; text-decoration: underline; color: white; font-size: 13pt; transform: translate(170px, 105px); }
by | 6 views

1 Answer

0 like 0 dislike
Initially you have a message about the layout, when the problem with the caps you change the message, but when a new problem with the layout after the caps, the text is not changed and displayed what was
if (isCyrillic(keyName)) { //print the message about not the correct layout //need to add var modalWindowCaps = document.getElementById("alertWindowText"); modalWindowCaps.innerHTML = ("layout!"); ... } else if (capsLockEnabled && keyName != null) { var modalWindowCaps = document.getElementById("alertWindowText"); modalWindowCaps.innerHTML = ("CapsLock Enabled!"); ... }
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
asked May 21, 2019 by quibbler1
110,608 questions
257,186 answers
0 comments
33,700 users