Loading a different file if user says correct response - javascript

On lines, 34-41 I'm trying to make it so if the user types in games it will automatically load a game from a different file, and the same for talk. How can I do this with js?
var storeUsersInfo = [];
var amountOfUsers = prompt("How many users do you want?");
amountOfUsers = parseInt(amountOfUsers);
function returnUserInput() {
var askFirstName = prompt("What is your first name?");
var askLastName = prompt("What is your last name" + " " + titleCase(askFirstName) + "?");
while(true) {
var askAge = prompt("How old are you" + " " + titleCase(askFirstName) + " " + titleCase(askLastName) + "?");
if(Number.isInteger(Number.parseInt(askAge))) break;
alert("Not a valid input, please enter your response as a number.");
};
return {
firstName: titleCase(askFirstName),
lastName: titleCase(askLastName),
age: askAge
};
};
function titleCase(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
};
for(var i = 0; i < amountOfUsers; i++) {
storeUsersInfo[i] = returnUserInput();
}
console.log("Your information has been stored in the object below.");
console.log(storeUsersInfo);
var askUserToDoSomethingElse = prompt("Do you want to do something else?"); // Yes or No
if(askUserToDoSomethingElse = "yes") {
var chooseSomethingElse = prompt("If you want to play a game type game, or if you just want to talk type talk.");
if(chooseSomethingElse === "game") {
alert("Okay!");
} else if (chooseSomethingElse === "talk") {
alert("Okay!");
}
};

You have two options :
1.) XMLHttpRequest
var client = new XMLHttpRequest();
client.open('GET', '/<fileName>');
client.onreadystatechange = function() {
//do something with your file
}
2.)Using Jquery
jQuery.get('http://localhost/foo.txt', function(data) {
//file loaded in data. Now you can use it.
});

Related

Uncaught TypeError: Cannot read properties of undefined (reading '1'); looping through arrays

I am attaching the URL to the issue I am talking about. If inspected, you can see the error.
I have program that is taking in data in a form and comparing it against json data and then outputting json data. I used an xmlhttprequest to grab the json and convert it to javascript array. I keep getting an error specifically about the following line of code. I will past the entire js file underneath.
Now the code is actually working at this time, but earlier it was not, and obviously I should find and fix the errors no matter what. I have been researching for hours, and can't fix the problem. Help would be so appreciated.
URL: https://oacaa.org/self-sufficiency-calculator/
if (arrBirds[i][1] === userAdultInt && arrBirds[i][2] === userInfantInt && arrBirds[i][3] === userPreschoolInt && arrBirds[i][4] === userSchoolageInt && arrBirds[i][5] === userTeenageInt && arrBirds[i][9] === userCounty)
function overIt() {
// Create XMLHttpRequest object.
var oXHR = new XMLHttpRequest();
// Initiate request.
oXHR.onreadystatechange = reportStatus;
oXHR.open("GET","/oacaa.json", true); // get json file.
oXHR.send();
function reportStatus() {
if (oXHR.readyState == 4) { // Check if request is complete.
// Create an HTML table using response from server.
createTableFromJSON(this.responseText);
}
}
// Create an HTML table using the JSON data.
function createTableFromJSON(jsonData) {
const userAdult = document.getElementById("adult").value;
const userAdultInt = parseInt(userAdult,10);
const userInfant = document.getElementById("infant").value;
const userInfantInt = parseInt(userInfant,10);
const userPreschool = document.getElementById("preschool").value;
const userPreschoolInt = parseInt(userPreschool,10);
const userSchoolage = document.getElementById("schoolage").value;
const userSchoolageInt = parseInt(userSchoolage,10);
const userTeenage = document.getElementById("teenage").value;
const userTeenageInt = parseInt(userTeenage,10);
const userCounty = document.getElementById("county").value;
const userChildren = Number(userInfantInt) + Number(userPreschoolInt) + Number(userSchoolageInt) + Number(userTeenageInt);
var arrBirds = [];
arrBirds = JSON.parse(jsonData); // Convert JSON to array.
for (i = 0; i < 63274; i++){
if (arrBirds[i][1] === userAdultInt && arrBirds[i][2] === userInfantInt && arrBirds[i][3] === userPreschoolInt && arrBirds[i][4] === userSchoolageInt && arrBirds[i][5] === userTeenageInt && arrBirds[i][9] === userCounty) {
// EXPENSES
document.getElementById("housing").innerHTML = arrBirds[i][10];
document.getElementById("childcare").innerHTML = arrBirds[i][11];
document.getElementById("food").innerHTML = arrBirds[i][12];
document.getElementById("transportation").innerHTML = arrBirds[i][13];
document.getElementById("healthcare").innerHTML = arrBirds[i][14];
document.getElementById("misc").innerHTML = arrBirds[i][15];
document.getElementById("taxes").innerHTML = arrBirds[i][16];
// TAX CREDITS
document.getElementById("EITC").innerHTML = arrBirds[i][17];
document.getElementById("CCTC").innerHTML = arrBirds[i][18];
document.getElementById("CTC").innerHTML = arrBirds[i][19];
// SELF SUFFICIENCY WAGE
document.getElementById("hourly").innerHTML = arrBirds[i][20];
document.getElementById("monthly").innerHTML = arrBirds[i][21];
document.getElementById("annual").innerHTML = arrBirds[i][22];
document.getElementById("emergency").innerHTML = arrBirds[i][23];
const userName = document.getElementById("name").value;
const userCounty = document.getElementById("county").value;
//PERSONAL INFO
document.getElementById("personal-info").innerHTML = "Self Sufficiency Report for" + " " + userName + "'s" + " " + "household living in " + " " + userCounty + "." + " " + "The residents in this household include" + " " + userAdultInt + " " + "adult(s)" + " " + "and" + " " + userChildren + " " + "child(ren)" + ".";
var x = document.getElementById("form-user-input");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
var j = document.getElementById("income-form");
if (j.style.display === "block") {
j.style.display = "none";
} else {
j.style.display = "block";
}
} else {
document.getElementById('error').innerHTML = "We do not currently have information for this family type. We apologize in advance." }
}
}
}

Modify a cell in Google Sheet using Google App Script

I am a beginner in google app script. I am creating a resident payment system where the user can change their password upon logging in. So now, I have done the html part for changing the password but I dont know how to do the coding in order to change the password. I have attached some pictures and my code to explain myself better. Thank you so much guys.
https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006 - Link to google sheet
https://script.google.com/macros/s/AKfycbw_A-XRlXtR9qGNvMKVrorMIg71hwHt0DrHRiNGVYZdURbadYgUtOIkJPsvuYsBK7Fe/exec - Link to Web App
https://script.google.com/d/1DdRKqUX__-ZITUgTZanQ_A7hUL1kcc0TZOeFmn58wYsX_o_7cqNExnYo/edit?usp=sharing - Link to app script
Code for Code.gs
var url = "https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006";
var streetSheetName = "JALAN SANGGUL 4";
function doGet(e) {
var streetSheetName = "JALAN SANGGUL 4"; // Added
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
return HtmlService.createHtmlOutputFromFile('WebAppLogin');
}
function checkLogin(username, password) {
var found_record = '';
var name = '';
var ss = SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("USERNAMES");
var getLastRow = webAppSheet.getLastRow();
for(var i = 2; i <= getLastRow; i++) {
if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && webAppSheet.getRange(i, 7).getValue() == password) {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
} else if (username.toUpperCase() == 'ADMIN' && password == 'ADMINPASSWORD') {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
}
}
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
if(found_record == '') {
found_record = 'FALSE';
}
return [found_record, username,name];
}
function GetRecords(username,filter) {
var filteredDataRangeValues = GetUsernameAssociatedProperties(username);
var resultArray = GetPaymentRecords(filteredDataRangeValues,filter);
return resultArray;
}
function GetUsernameAssociatedProperties(username) {
var filteredDataRangeValues = '';
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName("USERNAMES");
var dataRangeValues = displaySheet.getDataRange().getValues();
if (username.toUpperCase() == 'ADMIN') {
dataRangeValues.shift();
filteredDataRangeValues = dataRangeValues;
} else {
filteredDataRangeValues = dataRangeValues.filter(row => row[0].toUpperCase() == username.toUpperCase());
}
return filteredDataRangeValues;
}
function GetPaymentRecords(userProperties,filter) {
var streetSheetName = PropertiesService.getScriptProperties().getProperty("streetSheetName"); // Added
var transpose = m => m[0].map((_, i) => m.map(x => x[i]));
var resultArray = [];
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName(streetSheetName);
var addressValues = displaySheet.getRange("B:C").getValues();
var paidMonthValues = displaySheet.getRange(1, 7, displaySheet.getLastRow(), displaySheet.getLastColumn() - 6).getValues();
//Logger.log(addressValues);
//Logger.log(transpose(paidMonthValues));
userProperties.forEach((v, i) => {
var userHouseNumber = v[1];
var userStreet = v[2];
var column = addressValues.reduce(function callbackFn(accumulator, currentValue, index, array) {
if (currentValue[0] == userHouseNumber && currentValue[1] == userStreet) {
return index
} else {
return accumulator
}
}, '');
//Logger.log(column);
Logger.log(filter)
Logger.log(paidMonthValues);
if(filter=="None"){
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}else{
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
if(element[0].includes(filter))return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}
resultArray = resultArray.concat(result);
//Logger.log(resultArray);
})
//Remove null elements
resultArray = resultArray.filter(element=>{
Logger.log(element!=null)
return element != null;
});
return resultArray;
}
Code for WebAppLogin.html
function changePassword(){
var result = confirm("Want to Change Password?");
if (result) {
google.script.run
.withSuccessHandler(updateButton)
.getEmail()
alert('Password changed');
}
I believe your goal as follows.
When the button of "Change Password" is clicked and input the value and click "Save changes", you want to change the password in the Spreadsheet.
Modification points:
In your script, when "Save changes" button is clicked, it seems that google.script.run.withSuccessHandler(updateButton).getEmail() is run. But, unfortunately, in your script, there are no functions of updateButton and getEmail. By this, an error occurs.
When I saw your shared sample Spreadsheet, it seems that your sample Spreadsheet is different from the sample Spreadsheet of your image. For example, the column "A" of the sheet "USERNAMES" is different. In your shared Spreadsheet, the column "A" is 4.
From this situation, from your replying of it just the same you can notice it now yesterday I mistaken changed it in to 4 sorry about that., I understood that the column "A" of the sheet "USERNAMES" is "USERNAME".
About updateButton, in this answer, alert('Password changed') is run as the sample.
In order to update the password of Spreadsheet, it is required to use the username and the inputted password. And, it is also required to prepare the function at Google Apps Script side.
When above points are reflected to your script, it becomes as follows.
Javascript side:
From:
function GetRecords() {
var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
spin += " Loading...";
document.getElementById("LoginButton").innerHTML = spin;
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
To:
var username = ""; // Added
function GetRecords() {
var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
spin += " Loading...";
document.getElementById("LoginButton").innerHTML = spin;
username = document.getElementById("username").value; // Modified
var password = document.getElementById("password").value;
And, please modify changePassword() as follows.
function changePassword(){
var result = confirm("Want to Change Password?");
if (result) {
var newPassword = document.getElementById("newPassword").value;
google.script.run.withSuccessHandler(() => alert('Password changed')).changePassword(username, newPassword);
}
}
Google Apps Script side:
Please add the following function to Google Apps Script side.
function changePassword(username, newPassword) {
var sheet = SpreadsheetApp.openByUrl(url).getSheetByName("USERNAMES");
var range = sheet.getRange("A2:A").createTextFinder(username).matchEntireCell(true).findNext();
if (range) {
range.offset(0, 6).setValue(newPassword);
}
}
Note:
In this case, when the password is changed, the alert of "Password changed" can be seen. And, the column "G" of Sheet "USERNAMES" is changed.

Having issue about javascript arrays and objects

I am trying to save book objects in an array,
but the issue is I am unable to get the value from a user that how many books he wants to add, I want you guys to focus on the loop for(var i=0 ;i<2;i++). I want this loop to run by the number provided by the user. Let's say if a user enters 3 the code should be able to add three books, and before adding a new object it must show a message that enter a new book and then comes the property of an object to be entered
function addbook() {
let library = [];
function book(title, author, page, red) {
this.title = title;
this.author = author;
this.page = page;
this.red = red;
this.bookinfo = function() {
return "Author: " + this.author + "\nTitle: " + this.title + "\nPages: " + this.page + "\nRed: " + this.red;
}
}
for (var i = 0; i < 2; i++) {
book[i] = new book(window.prompt("Enter title"),
window.prompt("Enter Author"),
window.prompt("Enter pages"),
window.prompt("Have you red it yet"));
library.push(book[i].bookinfo());
}
for (var i = 0; i < library.length; i++) {
console.log(library[i]);
console.log(library.indexOf(library[i]));
}
}
Use the following function.
It will loop as long as no valid integer was entered and prompt the user to enter a something.
function promptInt(title, defaultVal) {
while (true) {
let input = window.prompt(title, defaultVal.toString());
let amount = parseInt(input);
if (!isFinite(bookAmount) || bookAmount <= 0) {
console.log('Please enter a valid number!');
} else {
return amount;
}
}
}
And then later in your code:
const bookAmount = promptInt('How many books do you wanna add?', '1');
for (int i = 0; i < bookAmount; i++) {
const prefix = "[Book " + (i + 1) + "] ";
book[i] = new book(
window.prompt(prefix + "Enter a title"),
window.prompt(prefix + "Enter the author"),
window.prompt(prefix + "Enter the page amount"),
window.prompt(prefix + "Have you red it yet")
);
library.push(book[i].bookinfo());
}
Is that what you are trying to achieve?
You simply need to parametrize the addbook() function and ask a user to provide the number of books to be added. Also, an alert() in the first loop will show the book number you are adding.
function addbook(amount) {
let library = [];
function book(title, author, page, red) {
this.title = title;
this.author = author;
this.page = page;
this.red = red;
this.bookinfo = function() {
return "Author: " + this.author + "\nTitle: " + this.title + "\nPages: " + this.page + "\nRed: " + this.red;
}
}
for (var i = 0; i < amount; i++) {
alert("Book #" + (i+1));
var b = new book(window.prompt("Enter title"),
window.prompt("Enter Author"),
window.prompt("Enter pages"),
window.prompt("Have you red it yet"));
library.push(b.bookinfo());
}
for (var i = 0; i < library.length; i++) {
console.log(library[i]);
console.log(library.indexOf(library[i]));
}
}
addbook(+window.prompt("How many books?"));

Array issues (javascript)

I created a small function that stores the book isbn, it's name and it's author. Everything is fine until I start to print out array. On every entery that completes the object into array, I want it to be printed one after another in new row, but this one is printing the objects from beginning every time when a new object is inserted. How do I fix this?
var books = [];
function blaBla(){
while(isbn != null || name != null || writer != null){
var isbn = window.prompt("Enter ISBN");
var name = window.prompt("Enter name of the book");
var writer = window.prompt("Enter name of the writer");
var patternString = /^[a-zA-Z]+$/;
var patternNum = /^[0-9]+$/;
if(isbn.match(patternNum)){
if(name.match(patternString)){
if(writer.match(patternString)){
books.push({
isbn: isbn,
name: name,
writer: writer
});
}
}
}
for (var i=0; i<books.length; i++){
document.write(books[i].isbn + " - " + books[i].name + " - " + books[i].writer + "</br>");
}
}
}
PS: How do I make it even more "cleaner", so when I hit cancel on prompt, it automatically stops with entering data into array, while, if i stop it on the "writer" prompt, it deletes previous entries for that object (last isbn and last name of the book)?
Thanks in advance.
You might want to give a little more context as to what this function is doing so we can help make your code cleaner as requested. I've separated the collection logic from the display logic here, and also used a while (true) loop with breaks on null or invalid inputs which will stop the collection of data.
Please note that prompt/alert boxes are a hideous way of collecting user input though (very awkward user experience). Consider using a table, input fields, and some jQuery instead to add rows and validate what the user has entered into input boxes.
var books = [];
function collectResponses() {
var patternString = /^[a-zA-Z]+$/;
var patternNum = /^[0-9]+$/;
while (true) {
var isbn = window.prompt("Enter ISBN");
if (!isbn || !isbn.match(patternNum)) {
break;
}
var name = window.prompt("Enter name of the book");
if (!name || !name.match(patternNum)) {
break;
}
var writer = window.prompt("Enter name of the writer");
if (!writer || !writer.match(patternNum)) {
break;
}
books.push({
isbn: isbn,
name: name,
writer: writer
});
}
}
function displayResponses() {
for (var i=0; i<books.length; i++){
document.write(books[i].isbn + " - " + books[i].name + " - " + books[i].writer + "</br>");
}
}

Fetching data with AJAX call, click handler causing issues displaying info

Where I'm At
I'm making a form for an online silent auction. People click a button, choose one of six fixed amounts $10, $25, $50, $100, $250, $500 and that amount gets added to the last bid, giving us total amount of their new bid.
Problem
It takes an extraordinarily long time (4-5 seconds after the button is clicked) to replace the tk-amount placeholder using.html to .current__amount and .new__amount and display these two pieces of data grabbed from a Google Spreadsheet using an AJAX call to the SheetsU API.
I have a feeling it's because of how much stuff is being done everytime a button is clicked. Is there a better way to approach this?
scripts.js
// Bid Options
$(".button__form").on('click', function(){
var btnSelected = $(this).hasClass("is-selected");
var sectionOneCompleted = $(".check--one").hasClass("is-completed");
if (btnSelected) {
$(this).removeClass("is-selected");
$(".check--one").css("color", "#ccc");
} else {
$(".button__form").removeClass("is-selected");
$(this).addClass("is-selected");
$(".check--one").css("color", "#ffdc00");
}
});
$(".button__form").on("click", function() {
var lastbtnClicked = ($(this).attr("class"));
// Bid Options
var buttonOne = $(this).hasClass("button__one");
var buttonTwo = $(this).hasClass("button__two");
var buttonThree = $(this).hasClass("button__three");
var buttonFour = $(this).hasClass("button__four");
var buttonFive = $(this).hasClass("button__six");
var buttonSix = $(this).hasClass("button__six");
// Bid Values
var buttonOneValue = 10;
var buttonTwoValue = 25;
var buttonThreeValue = 50;
var buttonFourValue = 100;
var buttonFiveValue = 250;
var buttonSixValue = 500;
/*-------------------------------------
API: SHEETSU
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
// Get and print data
var currentBid = parseInt(spreadsheet.result.pop().Bids);
console.log(currentBid);
var phoneNumber = "1" + spreadsheet.result.pop()["Phone Number"];
var printBid = $(".current__amount").html("$" + currentBid);
console.log(printBid);
if (buttonOne) {
$(".new__amount").html("$" + (currentBid + buttonOneValue));
} else if (buttonTwo) {
$(".new__amount").html("$" + (currentBid + buttonTwoValue));
} else if (buttonThree) {
$(".new__amount").html("$" + (currentBid + buttonThreeValue));
} else if (buttonFour) {
$(".new__amount").html("$" + (currentBid + buttonFourValue));
} else if (buttonFive) {
$(".new__amount").html("$" + (currentBid + buttonFiveValue));
} else if (buttonSix) {
$(".new__amount").html("$" + (currentBid + buttonSixValue));
}
});
});
Are you sure your "performance issues" arn't actually caused by your http request taking 4-5 seconds to complete? To check open your browsers console and click on the network tab. Then press your button. You should see a request send out and how long it takes to complete.
Lets go one by one
Take these out of callback, no need to reinitialize for every click.
// Bid Values
var buttonOneValue = 10;
var buttonTwoValue = 25;
var buttonThreeValue = 50;
var buttonFourValue = 100;
var buttonFiveValue = 250;
var buttonSixValue = 500;
Reduce below
$(".button__form").on('click', function(){
var btnSelected = $(this).hasClass("is-selected");
var sectionOneCompleted = $(".check--one").hasClass("is-completed");
if (btnSelected) {
$(this).removeClass("is-selected");
$(".check--one").css("color", "#ccc");
} else {
$(".button__form").removeClass("is-selected");
$(this).addClass("is-selected");
$(".check--one").css("color", "#ffdc00");
}
});
to this
$(".button__form").on('click', function(){
$(this).toggleClass("is-selected");
$(".check--one").toggleClass("is-completed");
});
//And adjust the color of .check--one in css
And use the class property efficiently
if (buttonOne) {
$(".new__amount").html("$" + (currentBid + buttonOneValue));
} else if (buttonTwo) {
$(".new__amount").html("$" + (currentBid + buttonTwoValue));
} else if (buttonThree) {
$(".new__amount").html("$" + (currentBid + buttonThreeValue));
} else if (buttonFour) {
$(".new__amount").html("$" + (currentBid + buttonFourValue));
} else if (buttonFive) {
$(".new__amount").html("$" + (currentBid + buttonFiveValue));
} else if (buttonSix) {
$(".new__amount").html("$" + (currentBid + buttonSixValue));
}
to something like this in for loop
$(".new__amount."+buttons[i].class).html("$" + (currentBid + buttons[i].value));
var buttons = [{class:"buttonSix", value:123},....]
So at last your code could look like this.
// Bid Options
var buttons = [{class:"buttonOne", value:12},....{class:"buttonSix", value:123}]
$(".button__form").on('click', function(){
$(this).toggleClass("is-selected");
$(".check--one").toggleClass("is-completed");
//And adjust the color of .check--one in css
var lastbtnClicked = ($(this).attr("class"));
/*-------------------------------------
API: SHEETSU
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
// Get and print data
var currentBid = parseInt(spreadsheet.result.pop().Bids);
console.log(currentBid);
var phoneNumber = "1" + spreadsheet.result.pop()["Phone Number"];
var printBid = $(".current__amount").html("$" + currentBid);
console.log(printBid);
var $btnForm = $(".button__form")
for(){
if($btnForm.hasClass(buttons[i].class)){
$(".new__amount.").html("$" + (currentBid + buttons[i].value));
}
}
});
});

Categories