Getting an error with the click function in Javascript - javascript

I am building an application that takes in grade and then gives the average. It also has a sort button that makes it so you can sort by the last name of the student entered and a clear button to clear the current values that are in the display array. Here is the code I have so far for the javascript file:
var $ = function (id) {return document.getElementById(id);}
"use strict";
var scoreArray = [];
var dispArray = [];
var displayScores = function () {
var totalScore = 0;
var numberOfScores = 0;
var averageScore = 0;
numberOfScores = scoreArray.length;
//loop to find the total score
for (var i=0;i<numberOfScores;i++)
{
totalScore = totalScore + scoreArray[i];
}
//find the average
averageScore = totalScore/numberOfScores;
var st="";
//put the string in the display array
for(var i=0; i<numberOfScores;i++)
{
st += (dispArray[i]+"\n");
}
//display the average score
$("#average_score").val(averageScore.toString());
$("#scores").val(st);
};
$("#add_button").click(function(){
var scoreNumber = parseInt( $("#score").val());
var scoreString = $("#last_name").val() + ", " + $("first_name").val() + ": " + $("#score").val();
scoreArray.push(scoreNumber);
dispArray.push(scoreString);
displayScores();
//reset the values
$("#first_name").val("");
$("#last_name").val("");
$("#score").val("");
$("#first_name").focus();
});
//function to clear the contents of the form
$("#clear_button").click(function(){
//empty the arrays
scoreArray=[];
dispArray=[];
//reset the values in the form
$("#scores").val("");
$("#first_name").val("");
$("#last_name").val("");
$("average_score").val("");
$("#score").val("");
});
//function to sort the scores based on the last name that was entered
$("#sort_button").click(function(){
var mylen = scoreArray.length;
//sorting
for(var kk=0;kk<mylen;kk++)
{
for(var aa = 1; aa<(mylen-kk);aa++)
{
var xp1 = dispArray[aa-1].split(" ");
var lname1 = xp1[0];
lname1 = lname1.slice(0, -1);
var xp2 = dispArray[aa].split(" ");
var lname2 = xp2[0];
lname2 = lname2.slice(0, -1);
if (lname1 > lname2){
var tp1 = scoreArray[aa];
scoreArray[aa]=scoreArray[aa-1];
scoreArray[aa-1] = tp1;
var tp2 = dispArray[aa];
dispArray[aa]=dispArray[aa-1];
dispArray[aa-1] = tp2;
}
}
}
//display the scores
$("#scores").val("");
var st=" ";
for(var i=0;i<dispArray.length;i++)
{
st += (dispArray[i]+"\n");
}
//display the sorted scores
$("scores").val(st);
});
$("#first_name").focus();
It is giving the error: Uncaught TypeError: Cannot read property 'click' of null
at scores.js:38
Line 38 is the click function for the add button to add the score to the display array: $("#add_button").click(function(){
Any thoughts on this?

This is happening because you've defined $ as a function which returns the result of document.getElementById().
What you've not accounted for is what happens if this operation finds no element, in which case it returns null, and there is no .click() method of null.
In short: your selector #add_button seems not to be finding the intended element. So check your DOM, and the presence of the element, before running that line. Always suspect your selectors. Either that or build in a check that only goes to .click() on finding an element successfully.
let el = $('#add_button');
if (el) el.click(...);

Related

Getting a error when click save and I am unable to create new number

When I click on save on my bootstrap modal button it tries to find next available number.
How ever if returns null throws error.
TypeError: matches is null
Question When click on save in bootstrap modal if no numbers found in textarea then will create a number. Currently if no findAvailableNumber function returns null unable to create a number
Codepen Example
$('#myLink').on('shown.bs.modal', function() {
var text = getSelectedText();
$('#title').val(text.trim());
$('#url').val('http://');
});
function getSelectedText() {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
return sel;
}
function findAvailableNumber(textarea){
//Find lines with links
var matches = textarea.value.match(/(^|\n)\s*\[\d+\]:/g);
//Find corresponding numbers
var usedNumbers = matches.map(function(match){
return parseInt(match.match(/\d+/)[0]); }
);
//Find first unused number
var number = 1;
while(true){
if(usedNumbers.indexOf(number) === -1){
//Found unused number
return number;
}
number++;
}
return number;
}
$('#save-link').on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
var counter = findAvailableNumber(textarea);
var replace = '[' + $('input#title').val() + ']' + '[' + counter + ']';
var id = '\n [' + counter + ']: ' + $('input#url').val();
if ($('#title').val().length > 0) {
textarea.value = textarea.value.substring(0,start) + replace +
textarea.value.substring(end,len) + id;
} else {
return false;
}
});
How links look in textarea when created.
[exmple-1][1] and [example-2][2]
[1]: http://www.example.com
[2]: http://www.example.com
You need to check to see if the <textarea> actually has a value within findAvailableNumber(). If not, return 1 to kick it off.
function findAvailableNumber(textarea){
var number = 1;
if(textarea.value){
//Find lines with links
var matches = textarea.value.match(/(^|\n)\s*\[\d+\]:/g);
//Find corresponding numbers
var usedNumbers = matches.map(function(match){
return parseInt(match.match(/\d+/)[0]); }
);
//Find first unused number
var number = 1;
while(true){
if(usedNumbers.indexOf(number) === -1){
//Found unused number
return number;
}
number++;
}
}
return number;
}
Here's an updated pen.

Locate Existing Numbers For Hyperlink In Textarea Set Next Avaibale One On Save / Click Modal

I am using CodeIgniter & jQuery and parsedown/markdown When I open my bootstrap modal, it allows me to create a new Reference-style link like on here.
I am trying to be able to find some how where it can find the next free number for my available in my textarea and when click save in model will set it.
I am fine [exmple-1][1] and [example-3][3]
[1]: http://www.example.com
[3]: http://www.example.com
And when I open my bootstrap modal and create a new hyperlink it will set and add the next available number
Here is the Codepen Example
Question: How can I when I create a new hyperlink in my bootstrap modal
and click save it can find the next available number set it. Because only 1 & 3 are set in example above next one should be 2 when click save in model
currently as you can see below I just use var counter = 1; and counter++; to be able to create numbers.
Script:
$('#myLink').on('shown.bs.modal', function() {
var text = getSelectedText();
$('#title').val(text.trim());
$('#url').val('http://');
});
function getSelectedText() {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
return sel;
}
var counter = 1;
$('#save-link').on('click', function(e) {
var textarea = document.getElementById("message");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
var replace = '[' + $('input#title').val() + ']' + '[' + counter + ']';
var id = '\n [' + counter + ']: ' + $('input#url').val();
counter++;
if ($('#title').val().length > 0) {
textarea.value = textarea.value.substring(0,start) + replace +
textarea.value.substring(end,len) + ' \n' + id;
$('#myLink').modal('hide');
//$('#myLink form')[0].reset();
} else {
return false;
}
});
You can use a simple regex to find the used numbers in the textarea:
function findAvailableNumber(textarea){
//Find lines with links
var matches = textarea.value.match(/(^|\n)\s*\[\d+\]:/g);
//Find corresponding numbers
var usedNumbers = matches.map(function(match){
return parseInt(match.match(/\d+/)[0]); }
);
//Find first unused number
var number = 1;
while(true){
if(usedNumbers.indexOf(number) === -1){
//Found unused number
return number;
}
number++;
}
return number;
}
Add the function, remove the line var counter = 1; and replace counter++; with var counter = findAvailableNumber(textarea);
JSFiddle
As Barmar said: store your already generated numbers in an object or an array and check for the next non-existing number:
var existingNumbers = [1, 3];
function getNextNumber() {
var i = 1;
while (existingNumbers.indexOf(i) > - 1) {
i++;
}
existingNumbers.push(i);
return i;
}
Then get the next number with:
var number = getNextNumber();

How to find the number of form elements that are getting passed to e.parameter in GAS?

In Google App Scripts (GAS), I want to be able to add and remove TextBox and TextArea elements to a FlexTable (that's being used as a form) and not worry about how many there are. I've named the text elements based on a counter to make this process easier.
So, is there a way to get the number of inputs (TextBox + TextArea) passed to e.parameter after the form is submitted?
Here's the relevant code from the FlexTable:
function doGet() {
var app = UiApp.createApplication();
var flex = app.createFlexTable().setId('myFlex');
var counter = 0;
var row_counter = 0;
...
var firstnameLabel = app.createLabel('Your FIRST Name');
var firstnameTextBox = app.createTextBox().setWidth(sm_width).setName('input' + counter).setText(data[counter]);
flex.setWidget(row_counter, 1, firstnameLabel);
flex.setWidget(row_counter, 2, firstnameTextBox);
row_counter++;
counter++;
var lastnameLabel = app.createLabel('Your LAST Name');
var lastnameTextBox = app.createTextBox().setWidth(sm_width).setName('input' + counter).setText(data[counter]);
flex.setWidget(row_counter, 1, lastnameLabel);
flex.setWidget(row_counter, 2, lastnameTextBox);
row_counter++;
counter++;
...
var submitButton = app.createButton('Submit Proposal');
flex.setWidget(row_counter, 2, submitButton);
var handler = app.createServerClickHandler('saveProposal');
handler.addCallbackElement(flex);
submitButton.addClickHandler(handler);
var scroll = app.createScrollPanel().setSize('100%', '100%');
scroll.add(flex);
app.add(scroll);
return app;
}
And here's the code for the ClickHandler (notice that I currently have 39 elements in my FlexTable):
function saveProposal(e){
var app = UiApp.getActiveApplication();
var userData = [];
var counter = 39;
for(var i = 0; i < counter; i++) {
var input_name = 'input' + i;
userData[i] = e.parameter[input_name];
}
So, is there a way to get the number of elements (in this case 39) without manually counting them and assigning this value to a variable?
I'm new at this stuff and I'd appreciate your help.
Cheers!
The simplest way is to add a hidden widget in your doGet() function that will hold the counter value like this :
var hidden = app.createHidden('counterValue',counter);// don't forget to add this widget as a callBackElement to your handler variable (handler.addCallBackElement(hidden))
then in the handler function simply use
var counter = Number(e.parameter.counterValue);// because the returned value is actually a string, as almost any other widget...
If you want to see this value while debugging you can replace it momentarily with a textBox...
You can search for arguments array based object.
function foo(x) {
console.log(arguments.length); // This will print 7.
}
foo(1,2,3,4,5,6,7) // Sending 7 parameters to function.
You could use a while loop.
var i = 0;
var userData = [];
while (e.parameter['input' + i] != undefined) {
userData[i] = e.parameter['input' + i];
i++;
};
OR:
var i = 0;
var userData = [];
var input_name = 'input0';
while (e.parameter[input_name] != undefined) {
userData[i] = e.parameter[input_name];
i++;
input_name = 'input' + i;
};

Calling multiple functions with one button

I am trying to call two functions when only the "add" button is clicked. the problem I am having is that the final four textboxes in the calculate_balances function are not outputting their variables.
var $ = function (id) {
return document.getElementById(id);
}
// Declare Arrays to store information from Inputs //
var transactions = [];
transactions[0] = []; // holds date
transactions[1] = []; // holds transaction type
transactions[2] = []; // holds amount
// Function to print results to text area //
var update_results = function () {
var list = ""; // string variable to build output //
// check to see if arrays are empty //
if (transactions[0].length == 0) {
$("results").value = "";
} else {
list = "";
// for loop to cycle through arrays and build string for textarea output //
for (var i = 0; i < transactions[0].length; i++) {
list += transactions[0][i] + " " + transactions[1][i] + " " + transactions[2][i] + "\n";
}
// display results //
$("results").value = list;
}
}
// function to gather inputs //
var add_transaction = function () {
$("add").blur();
transactions[0][transactions[0].length] = $("date").value;
transactions[1][transactions[1].length] = $("transType").value;
transactions[2][transactions[2].length] = parseFloat( $("amount").value);
update_results();
calculate_balances();
}
// function for Calculations //
var calculate_balances = function () {
var startBal = 2000.00;
var ttlDeposits = 0;
var ttlWithdrawals = 0;
var endBal = startBal;
if (transactions[1][transactions[1].length] == "deposit")
{
ttlDeposits += transactions[2][transactions[2].length];
endBal += ttlDeposits;
}
if (transactions[1][i] == "withdrawal")
{
ttlWithdrawals += transactions[2][transactions[i]];
endBal -= ttlWithdrawals;
}
$("balStart").value = parseFloat(startBal);
$("ttlDeposits").value = parseFloat(ttlDeposits);
$("ttlWithdrawals").value = parseFloat(ttlWithdrawals);
$("balEnd").value = parseFloat(endBal);
}
window.onload = function () {
$("add").onclick = add_transaction, calculate_balances;
update_results();
}
tHank you
Edit: Did not realize the OP was NOT using jQuery. Your onclick should look like this:
$("add").onclick = function(){
add_transaction();
calculate_balances();
};
The rest here is for jQuery which is not what the OP wanted.
For setting the value of a text box with jQuery use the val() method:
$("balStart").val(parseFloat(startBal));
To call the two methods when the button is clicked:
$("add").click(function(){
add_transaction();
calculate_balances();
});

Script is working, but only with a "hack"

Background:
I am part of a large family and to save everyone some money at Christmas, we do a Secret Santa of sorts for gift giving. I am writing this script so that this all can be managed via a spreadsheet since our process can be somewhat messy. The rules are:
Each "Santa" is given two names that they must buy gifts for.
Those 2 names can not be the same.
Couples can not give gifts to each other or their children. Children
can not give gifts to their siblings or their parents.
Here is a table with some example data:
The Problem
I believe my issue is occurring because of the following code:
//Remove disallowedNames from currentAvailableNames
for (j=0; j<disallowed.length; j++){
var disallowedName = disallowed[j];
currentAvailableNames.splice(currentAvailableNames.indexOf(disallowed[j]), 1);
}
For some reason, the disallowed name(s) are also being removed from the availableNames array and I have no idea why. The only way I have been able to "fix" it, is by adding in the following code after the recipient has been picked:
//Add Disallowed Names back to Available Names Array
for (k=0; k<disallowed.length; k++){
var disallowedName = disallowed[k];
if (disallowedName.length >0) {
availableNames.push(disallowedName);
}
}
Original Code
function giftAssignments() {
//Get Settings
var ss = SpreadsheetApp.getActiveSpreadsheet();
var settings = ss.getSheetByName("Settings");
var resultsSheet = ss.getSheetByName("Results");
var numOfAssignments = settings.getRange("B2").getValue();
var minPrice = settings.getRange("B3").getValue();
var maxPrice = settings.getRange("B4").getValue();
var firstName = settings.getRange("B5").getValue();
var santasLastRow = settings.getLastRow();
var santasLastCol = settings.getLastColumn();
var santasTotal = santasLastRow - firstName + 1;
var santasAsRange = settings.getRange(firstName,1,(santasLastRow - firstName + 1), santasLastCol).getValues();
//Create Santas Array (santas)
var santas = []
for (var i=0; i<santasAsRange.length; i++) {
var name = santasAsRange[i][0];
var email = santasAsRange[i][1];
var disallowedAsString = santasAsRange[i][2];
disallowedAsString = disallowedAsString.replace(", ",",");
var disallowed = disallowedAsString.split(",");
disallowed.push(name);
var santa = [];
santa[0] = name;
santa[1] = email;
santa[2] = disallowed;
santas.push(santa);
}
//Create Array of Names (availableNames)
var availableNames = [];
for (i=0; i<santas.length; i++) {
var aName = santas[i][0];
availableNames.push(aName);
}
//Assign Recipients
var results = assignRecip(santas, availableNames);
Logger.log("RESULTS = " + results);
}
function assignRecip(santas, names) {
var availableNames = names;
for (i=0; i<santas.length; i++) {
var currentAvailableNames = availableNames;
var name = santas[i][0];
var disallowed = santas[i][2];
Logger.log("Santa = " + name);
Logger.log("availableNames = " + availableNames);
//Remove disallowedNames from currentAvailableNames
for (j=0; j<disallowed.length; j++){
var disallowedName = disallowed[j];
currentAvailableNames.splice(currentAvailableNames.indexOf(disallowed[j]), 1);
}
Logger.log("currentAvailableNames = " + currentAvailableNames);
//Pick Random Ricipient from currentAvailableNames
var recipient = currentAvailableNames[Math.floor(Math.random() * currentAvailableNames.length)];
Logger.log("Recipient = " + recipient);
//Add Recipient to Santa Array
santas[i].push(recipient);
//Add Disallowed Names back to Available Names Array
for (k=0; k<disallowed.length; k++){
var disallowedName = disallowed[k];
if (disallowedName.length >0) {
availableNames.push(disallowedName);
}
}
//Add Recipient to Disallowed Names Array
santas[i][2].push(recipient);
//Remove Recipient from Available Names Array
availableNames.splice(availableNames.indexOf(recipient),1);
Logger.log("availableNames = " + availableNames);
Logger.log(" ");
}
return santas;
}
They're references to the same Array. This code doesn't copy the Array itself. It copies the reference to the Array.
var currentAvailableNames = availableNames;
You can fix it using .slice().
var currentAvailableNames = availableNames.slice();
Now you have two separate Arrays, so direct modifications to currentAvailableNames will not affect availableNames.
Note that this is a shallow clone. If it was an Array of Objects or Arrays, then modifications to the nested Object would still be visible from both Arrays.

Categories