i have these inputs and i wanted to check every one of them has value then do something;
const tch_family_name = document.getElementById('tch_family_name');
const tch_lastname = document.getElementById('tch_lastname');
const tch_name = document.getElementById('tch_name');
const tch_phone = document.getElementById('tch_phone');
const first_alph = document.getElementById('first_alph');
const second_alph = document.getElementById('second_alph');
const third_alph = document.getElementById('third_alph');
const tch_bday = document.getElementById('tch_bday');
const textarea1 = document.getElementById('textarea1');
and I'm checking they have value or not like this
function checkEmpty(check) {
for (i = 0; i < check.length; i++) {
if (check[i].value == "" || check[i].value == " " || check[i].value == null) {
check[i].classList.add('inputErrorBorder')
} else {
check[i].classList.remove('inputErrorBorder')
}
}
}
//mainInfo button id
mainInfo.addEventListener('click', () => {
test = [tch_family_name, tch_lastname, tch_name, tch_phone, first_alph, second_alph, third_alph, tch_bday, textarea1]
checkEmpty(test)
})
now how to do something when all input have value;
I tried else if() but it gave an incorrect result for example when first input don't value then it wont add inputErrorBorder class to a second or third inputs.
Please help;
One of the easiest ways to add this to your current setup is to add a flag variable to the checkEmpty function and return that value. Then process the results in the EventListener
checkEmpty With hasEmpty Flag
function checkEmpty(check) {
let hasEmpty = false;
for (let i = 0; i < check.length; i++) {
if (check[i].value === "" || check[i].value === " " || check[i].value == null) {
check[i].classList.add('inputErrorBorder');
hasEmpty = true;
} else {
check[i].classList.remove('inputErrorBorder');
}
}
return hasEmpty;
}
Using hasEmpty flag from checkEmpty
mainInfo.addEventListener('click', () => {
let test = [tch_family_name, tch_lastname, tch_name, tch_phone,
first_alph, second_alph, third_alph, tch_bday, textarea1];
let hasEmpty = checkEmpty(test);
if (!hasEmpty) {
// All Have Value
} else {
// Something has missing value
}
})
Related
I have a javascript snippet that doesn't work properly on Safari / iOS and would like some help.
let coverageAtt1 = document.getElementById("att-check1");
let coverageAtt2 = document.getElementById("att-check2");
let coverageAtt3 = document.getElementById("att-check3");
let coverageAtt4 = document.getElementById("att-check4");
let checkboxes = [coverageAtt1, coverageAtt2, coverageAtt3, coverageAtt4];
let attributeCond = [];
let coverageCond = '';
for (let checkbox of checkboxes) {
checkbox.oninput = function() {updateAtt()};
function updateAtt() {
if (checkbox.checked) {
attributeCond.push(checkbox.value);
}
else if (attributeCond.includes(checkbox.value)) {
attributePosition = attributeCond.indexOf(checkbox.value);
attributeCond.splice(attributePosition, 1);
}
else {
null;
}
console.log(attributeCond);
sliders();
}
}
function sliders() {
filteredPlans = plans.filter((item) => {
if (attributeCond.length == 0) {
coverageCond = attributeCond.includes(item.coverage) == false;
}
else {
coverageCond = attributeCond.includes(item.coverage) == true;
}
return (coverageCond);
});
Opening the console in Safari states that the "checkbox" variable have not been declared/cannot be found.
i try to create typing test web application //error ///
this code i copied from github https://github.com/WebDevSimplified/JS-Speed-Typing-Game
i try to add timer when user press a key..
var err=0;
let sttime =0;
console.log(sttime);
quoteInputElement.addEventListener('input', () => {
err ++; /////does not work
console.log(sttime); ///does not work
console.log('jbjabj');
const arrayQuote = quoteDisplayElement.querySelectorAll('span');
const arrayValue = quoteInputElement.value.split('');
let correct = true;
arrayQuote.forEach((characterSpan, index) => {
const character = arrayValue[index];
if (character == null) {
characterSpan.classList.remove('correct');
characterSpan.classList.remove('incorrect');
correct = false
} else if (character === characterSpan.innerText) {
characterSpan.classList.add('correct');
characterSpan.classList.remove('incorrect');
} else {
characterSpan.classList.remove('correct');
characterSpan.classList.add('incorrect');
correct = false;
}
})
})
console.log(sttime);
if(sttime == 1){
startTimer();
}
I got these two functions, and they work great.
But since I only call global.replaceFields from global.translateAll then I want to get rid of global.replaceFields and put its functionality inside global.translateAll
How would you go about merging global.replaceFields into global.translateAll without losing the current functionality?
Thanks :)
// Translate everything in that field
global.translateAll = (textfield, usersLanguage) => {
for (var property in textfield) {
if (!textfield.hasOwnProperty(property)) {
return false;
} else if (typeof textfield[property] !== "object") {
textfield[property] = global.replaceFields(textfield[property], usersLanguage);
} else {
global.translateAll(textfield[property], usersLanguage);
}
}
}
// Translate everything in that field
global.replaceFields = (textfield, usersLanguage) => {
// Keep running until all fields are replaced
while (textfield.indexOf("{{") != -1) {
// isolate the field
let fromField = textfield.substring((textfield.indexOf("{{") + 2), (textfield.indexOf("}}")));
let toField = ""
// If its a translated text
if (fromField.indexOf("trans") != -1) {
toField = usersLanguage[fromField];
textfield = textfield.replace("{{" + fromField + "}}", toField);
}
}
return (textfield);
}
This should work
global.translateAll = (textfield, usersLanguage) => {
var replaceFields = (textfield, usersLanguage) => {
// Keep running until all fields are replaced
while (textfield.indexOf("{{") != -1) {
// isolate the field
let fromField = textfield.substring((textfield.indexOf("{{") + 2), (textfield.indexOf("}}")));
let toField = ""
// If its a translated text
if (fromField.indexOf("trans") != -1) {
toField = usersLanguage[fromField];
textfield = textfield.replace("{{" + fromField + "}}", toField);
}
}
return (textfield);
}
for (var property in textfield) {
if (!textfield.hasOwnProperty(property)) {
return false;
} else if (typeof textfield[property] !== "object") {
textfield[property] = replaceFields(textfield[property], usersLanguage);
} else {
global.translateAll(textfield[property], usersLanguage);
}
}
}
I stumbled upon a problem that i have no idea how to fix. I want to be able to check when a radio button is checked. If one of the five buttons is checked, it should give the feedback. Somehow with my code, when i check the first radio button, it works. But if i check the 2nd or 3rd ... It gives me the alert message: please give a rating. So that means either the for loop in the function radioChecker is not working as intended, or i don't know.
{
let validation = document.querySelector('.type__style');
let validation2 = document.getElementById("label__text");
const init = () => {
const $button = document.getElementById('send__button');
$button.onclick = () => {
revealText();
setTimeout(dissapearText, 4000);
}
const radioChecker = () => {
let radios = document.querySelector(".stars").querySelectorAll("input");
for (let i = 0; i <radios.length; i++) {
if (radios[i].checked) {
console.log("yes");
return true;
} else {
return false;
}
}
}
const revealText = () => {
if (validation.value === "") {
validation.focus();
window.alert("Please enter your name.");
return false;
} else if (validation2.value === "") {
validation2.focus();
window.alert("Please fill in commentary.");
return false;
} else if (radioChecker() === false) {
window.alert("Please give a rating.");
return false;
} else {
document.querySelector('.feedback').style.opacity = 1;
console.log('work');
return true;
}
}
const dissapearText = () => {
document.querySelector('.feedback').style.opacity = 0;
}
}
init();
}
This is because you have a return true in the loop. The moment it returns true on the first loop it will break the loop.
const radioChecker = () => {
let radios = document.querySelector(".stars").querySelectorAll("input");
for (let i = 0; i <radios.length; i++) {
if (radios[i].checked) {
console.log("yes");
return true;
}
}
return false;
}
Explanation:
So, the for loop check all radios. if any radio is checked, it will immediately return true.
After running full loop, if it did not find any radio is checked, it will return false.
i'm working on a Angular2 application. I'm trying to mask a creditcard. Everything is fine but I got an issue.
For example I enterd 2222-3333-1111. After that I realized I forgot to enter 0000 between 2 and 3. When I try to enter the value between 2 and 3, the cursor moving to end and the output is like "2222-0333-3111-1000".
I tried some solutions from stackOverFlow but nothing helped me. Please suggest me some solution to solve this.
Below is the code which I have implimented
protected digitPattern = /\d{1,4}\-{0,1}\d{0,4}\-{0,1}\d{0,4}-{0,1}\d{0,4}-{0,1}\d{0,4}/;
constructor(model: FormControlName) {
this.model = model;
}
#HostListener('input', ['$event']) onInput(event: any) {
const currentValue = this.model.value;
this.updateValue(currentValue);
}
#HostListener('ngModelChange', ['$event']) onNgModelChange(currentValue: string) {
this.updateValue(currentValue);
}
// updates the actual and displayed values
updateValue(currentValue: string) {
const actualValue = this.getActualValue(currentValue);
const maskedValue = this.getMaskedValue(actualValue);
if (currentValue !== actualValue) {
// This is the actual binding (unmasked) value
this.model.control.setValue(actualValue, {emitModelToViewChange: false});
}
// This is the displaying (masked) value
this.model.valueAccessor.writeValue(maskedValue);
}
// Returns the masked value
getMaskedValue(actualValue: string): string {
let maskedValue = '';
const unmaskedValue = actualValue.replace(/\D+/g, '');
for (let i = 0; i < unmaskedValue.length && i < 23; i++) {
if (!(i % 4) && (i > 0)) {
maskedValue += this.separator;
}
maskedValue += unmaskedValue[i];
}
if (actualValue.endsWith(this.separator)) {
if (maskedValue.length === 3 || maskedValue.length === 7) {
maskedValue += this.separator;
}
}
return maskedValue;
}
// Returns the actual (unmasked) value
getActualValue(currentValue: string): string {
let result = '';
// Check if something is available to mask
if (currentValue && currentValue.length > 0) {
const digits = currentValue.match(this.digitPattern);
if (digits) {
for (const value of digits) {
result += value;
}
}
}
return result;
}