Looking for a little guidance. I know its something small and dumb but I'm completely drawing a blank at this point and could use some help. I'm trying to create a mobile app for my class that needs a dynamic table for my results. I'm attempting to create a user input to select a number of "Random powerball tickets" and the table would give "Ticket 1 / Random Numbers." I have managed to create the random number generator onclick but cant for the life of me figure out the rest.
HTML- I dont remember how to connect the user input to the button and repeat x amount of times to match.
<div data-role="content">
<p>This will be a simple application that provide generated powerball numbers between 1-69.</p>
</div>
<div>
<button id="button" onClick="winningNumbers()" >Powerball Numbers</button>
</div>
<p id="outcome"></p>
<table id="data">
</table>
Current Javascript
var powerball;
function powerballNumbers(max) {
var ranNum = Math.floor((Math.random() * max) + 1);
return ranNum;
}
function main() {
powerball = [];
for (i = 0; i < 5; i++) {
powerball.push(powerballNumbers(69));
}
powerball.push(powerballNumbers(26));
}
function winningNumbers() {
main();
var totalTickets = document.getElementById("outcome");
totalTickets.innerText = powerball;
}
Thinking of something like this for the table but know it's not correct
function updateTable(ticketNumber, powerballNumber) {
var dataTable = document.getElementById("data");
dataTable.innerHTML = "";
// create rows of data based on given arrays
(Not sure what to put here)
// create header row
var thead = dataTable.createTHead();
var row = thead.insertRow(0);
var tableHeaders = ["Ticket", "Numbers"];
for (var i = 0; i < tableHeaders.length; i++) {
var headerCell = document.createElement("th");
headerCell.innerHTML = tableHeaders[i];
row.appendChild(headerCell);
}
}
I'm not entirely sure of what your end goal is, but the best I understand is you want to generate some tickets with an ID, and each ticket has 5 numbers? If so, I simply generated a ticket ID, and 5 numbers to go with that ticket. Then in the update table function, I've simplified it so it can focus on just appending new rows. If I've missed the mark please comment below and/or update your question.
Just some side comments.
Avoid using attributes for click events, it's unreliable at best.
Don't hestiate to use HTML when HTML is the answer. Your original update table method was going to build out a table? It only adds a headache, not ease.
Good job on leveraging the tools <table> gives us!
var powerball;
function powerballNumbers(max) {
var ranNum = Math.floor((Math.random() * max) + 1);
return ranNum;
}
function main() {
let i = 0
interval = setInterval(function() {
updateTable(powerballNumbers(9999), [powerballNumbers(69),
powerballNumbers(69),
powerballNumbers(69),
powerballNumbers(69),
powerballNumbers(69)
]);
i++;
if (i > 5) {
clearInterval(interval);
}
}, 500)
}
function winningNumbers() {
main();
var totalTickets = document.getElementById("outcome");
totalTickets.innerText = powerball;
}
function updateTable(ticket, powerballNumber) {
var dataTable = document.getElementById("data");
let newRow = dataTable.insertRow();
let ticketCell = newRow.insertCell();
ticketCell.textContent = ticket;
let numbers = newRow.insertCell();
numbers.textContent = powerballNumber.join(", ");
}
<div data-role="content">
<p>This will be a simple application that provide generated powerball numbers between 1-69.</p>
</div>
<div>
<button id="button" onClick="winningNumbers()">Powerball Numbers</button>
</div>
<p id="outcome"></p>
<table id="data" border=1>
<thead>
<tr>Ticket Number</tr>
<tr>Numbers</tr>
</thead>
</table>
Related
Ok, I am going to try to explain this as best as I can. I created a search for a database that has 3 columns: Category, OEM Number, and Price. I want to make so that when the user inputs an OEM number it will show the category and OEM Number as the result, then the results are clickable to show the entire row, Category, OEM Number, and Price. I also want it so that if they only input a partial OEM Number, that it will list all the OEM Numbers that include that partial number and they click the correct full OEM Number they want to display the Category, OEM Number, and Price for that OEM Number. Here is my code as of now, it just has them input an OEM Number and returns the entire row or if they input a partial number it returns all results including that partial number all on the page. I want the page that shows the price to only have a single entry on it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>AJAX Search Example</title>
<script>
function fetch() {
// (A) GET SEARCH TERM
var data = new FormData();
data.append('search', document.getElementById("search").value);
data.append('ajax', 1);
// (B) AJAX SEARCH REQUEST
var xhr = new XMLHttpRequest();
// (CHANGE1) USING ONREADYSTATECHNAGE INSTEAD OF ONLOAD
xhr.onreadystatechange = function (event) {
// (CHANGE2) we will check if ajax process has completed or not it goes from 1,2,3,4 means end.
if(this.readyState == 4){
// (CHANGE2) when ready state comes to 4 we then check what response status was it if it is 200 good else error.
if(this.status == 200){
// (CHANGE3) MOVED ALL YOUR CODE HERE
// (CHANGE4) we need to use responseText instead of response because JSON comes as string that is why we are parsing it to be converted into array
var results = JSON.parse(this.responseText);
//I have added just a measure to check what the out put is you can remove it latter. open dev console to get the result.
console.log(results);
wrapper = document.getElementById("results");
wrapper.innerHTML = "";
var rows = "";
if (results.length > 0) {
// (CHANGE5) UPDATED data ref with results
for (i = 0; i < results.length; i++) {
let line = document.createElement("div");
//it is just as simple to create id only it must start with alaphabet not number
line.id=`res${[i]}`;
//we created span tag to display price and this is what we will change. on that span we will create a data-price attribute which will hold orginial price and we will run claulcations using that number
//BIG CHANGE
//BIG CHANGE
//since after parsing invidual record will be in Js object so we dont need to access them like array results[i]['item']
//we access them with dot notation results[i].item
rows += `<tr id=res${[i]}><td>${results[i].category}</td><td>${results[i].oemnumber}</td><td>$<span data-price='${results[i].price}'>${results[i].price}</span>
select discount >>
%70
%60
%50 100%</td></tr>`;
}
wrapper.innerHTML = `<table class="table">
<thead><th>Category</th><th>OEM</th><th>Price</th></thead><tbody>${rows}</tbody></table>`;
// (CHANGE6) We moved event listeners here so any newly added elements will be updated.
//get all the links and apply event listener through loop
var links = document.querySelectorAll('a');
for ( ii = 0; ii < links.length; ii++) {
links[ii].addEventListener("click", function(event) {
//capture link value and get number to be converted to percentage
var percentage = event.target.innerText.match(/\d+/)[0]/100;
//capture the data-price which is within same div as anchor link
var pricetarget = event.target.parentElement.querySelector('[data-price]');
//get value of data-price
var actualprice= pricetarget.dataset.price;
//run math and chnage the value on display
pricetarget.innerHTML=(actualprice*percentage).toFixed(2);
});
}
} else { wrapper.innerHTML = "No results found"; }
} else {
//if reponse code is other ethan 200
alert('INTERNET DEAD OR AJAX FAILED ');
}
}
};
// (CHANGE7) We moved open event to end so everything is ready before it fires.
xhr.open('POST', "2-search.php");
xhr.send(data);
return false;
};
</script>
</head>
<body>
<!-- (A) SEARCH FORM -->
<form ID='myForm' onsubmit="return fetch();">
<h1>SEARCH FOR CATALYTIC CONVERTER</h1>
<input type="text" id="search" required/>
<input type="submit" value="Search"/>
</form>
<!-- (B) SEARCH RESULTS -->
<div id="results"></div>
</body>
</html>
To sum it up simply, I want to have the first results return just 2 columns in the results, the category and the OEM Number. Then I want those results to be clickable and return the entire single row, all 3 columns. Thank you for any help you can offer.
Avoid calling a global function fetch, and there is a built in browser function also called fetch that's like a much much better XMLHttpRequest.
Let's rename that fetch function to getData, to save confusion.
Next up it's getting data and trying to update your DOM, which makes it much harder to debug and find out what it's doing wrong.
You're setting document.getElementById("results").innerHTML, which will work, but will also cause fairly slow reflows. You may want to set DOM directly or use a library like Lit or React (or any of the many others) that will handle that for you.
By replacing the AJAX fetch with dummy data I can test this, and it works in a snippet...
async function getData() {
// (A) GET SEARCH TERM
const data = new FormData();
data.append('search', document.getElementById("search").value);
data.append('ajax', 1);
const wrapper = document.getElementById("results");
wrapper.innerHTML = "Loading...";
// This is the better API to use
//const response = await fetch(...);
//if(!response.ok) return;
//const results = await response.json();
// But let's use a dummy
const results = [{
category: 'foo',
oemnumber: 1,
price: 1
},
{
category: 'bar',
oemnumber: 2,
price: 2
}
];
let rows = "";
if (results.length > 0) {
for (i = 0; i < results.length; i++) {
let line = document.createElement("div");
line.id = `res${[i]}`;
rows += `<tr id=res${[i]}><td>${results[i].category}</td><td>${results[i].oemnumber}</td><td>$<span data-price='${results[i].price}'>${results[i].price}</span>
select discount >>
%70
%60
%50 100%</td></tr>`;
}
wrapper.innerHTML = `<table class="table">
<thead><th>Category</th><th>OEM</th><th>Price</th></thead><tbody>${rows}</tbody></table>`;
const links = document.querySelectorAll('a');
for (ii = 0; ii < links.length; ii++)
links[ii].addEventListener("click", function(event) {
const percentage = event.target.innerText.match(/\d+/)[0] / 100;
const pricetarget = event.target.parentElement.querySelector('[data-price]');
const actualprice = pricetarget.dataset.price;
pricetarget.innerHTML = (actualprice * percentage).toFixed(2);
});
} else
wrapper.innerHTML = "No results found";
};
document.getElementsByTagName('form')[0].addEventListener('submit', e => {
e.preventDefault();
getData();
return false;
});
<!-- (A) SEARCH FORM -->
<form ID='myForm'>
<h1>SEARCH FOR CATALYTIC CONVERTER</h1>
<input type="text" id="search" required/>
<input type="submit" value="Search" />
</form>
<!-- (B) SEARCH RESULTS -->
<div id="results"></div>
It sounds like you're describing a master-detail-list, where selecting a row shows a detail panel with more information. Generally you want to split this out so that the detail is rendered outside the result list, as you reset the result list all the time.
Currently I'm trying to create a quiz, right now it displays the first question with 4 answer choices after the start button I am stuck on how to retrieve the answer. The user clicks, check to see if its correct and loop to the next question. I just want to give the user one chance per question and move on regardless if it's correct or not. If their answer is wrong I will remove seconds from the timer. I have the questions, answer choices, and correct answers in arrays.
<div class="card-body">
<p id="header">
You have 75 seconds to complete this asessment.
Every incorrect answer will cost you time.
<br>
</p>
<button id="start-button" class="btn">Start</button>
<div id="start-game" style="visibility: hidden">
<button id="option0" data-index="0"></button><br>
<button id="option1" data-index="1"></button><br>
<button id="option2" data-index="2"></button><br>
<button id="option3" data-index="3"></button><br>
</div>
</div>
<script src="./script.js"></script>
var timerEl = document.getElementById("timer");
var start = document.getElementById("start-button");
var questionEl = document.getElementById("header");
var option0 = document.getElementById("option0");
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var intials = document.getElementById("user-initials");
var buttonEl = document.getElementById("start-game");
var totalTime = 75;
var elapsedTime = 0;
var questionNum = 0;
var questions =["The condition in an if/else statement is enclosed with in _______",
"Arrays in JavaScript can be used to store ______",
"Commonly used data types do not include ______",
"String values must be enclosed within _____ when being assigned to variables"];
var answers =[question1= ["Quotes","Curly brackets","Parentheses","Square brackets"],
question2= ["Numbers and strings","Other arrays","Booleans","All of the above"],
question3= ["Strings","Booleans","Alerts","Numbers"],
question4= ["Commas","Curly brackets","quotes","parentheses"],
];
var correctAnswers = [2,3,2,2];
start.addEventListener("click", function(){
timer();
displayQuestion();
start.style.visibility = "hidden";
buttonEl.style.visibility = "visible";
});
function timer(){
var timerInterval = setInterval(function(){
totalTime --;
timerEl.textContent = totalTime;
if(totalTime === 0){
clearInterval(timerInterval);
endQuiz();
return;
}
}, 1000);
}
function newQuiz(){
questionEl.textContent = (questions[0]);
};
function displayQuestion(){
for( var i = 0; i < questions.length ; i++){
questionEl.textContent=(questions[i]);
option0.textContent=(answers[i][0]);
option1.textContent=(answers[i][1]);
option2.textContent=(answers[i][2]);
option3.textContent=(answers[i][3]);
console.log(i);
return;
}
}
Hi I will try to provide an easy solution to your question without using any kind of difficult javascript syntax so here goes..
First in your html file update the option button and add a class property called clickOption(you can change the class name if you want, but be sure to change in other places in script.js as well). The code is shown below.
<button id="option0" class="clickOption" data-index="0"></button><br>
<button id="option1" class="clickOption" data-index="1"></button><br>
<button id="option2" class="clickOption" data-index="2"></button><br>
<button id="option3" class="clickOption" data-index="3"></button><br>
Now in your script.js file add the line of code shown below. I have added inline comments for better understanding
// get all elements with class clickoption i.e all option buttons
var elements = document.getElementsByClassName("clickOption");
//use the below array to track the selected answers
var selectedAnswers = [];
var clickOption = function() {
/** Here I have reached the end of the test and,
I am logging the array of user-selected options.
This array can be compared with correctAnswers array
to determine whether the answer is correct or not **/
if(questionNum >= questions.length) {
console.log(selectedAnswers);
return;
}
/**Get the option value that was clicked.
Here I am using parseInt because,
the data-index attribute value will be in string format,
and the correctAnswers array is in Number format so it is better,
to keep the selectedAnswers array in Number format as it will faciliate
easier data comparison**/
var selectedOption = parseInt(this.getAttribute('data-index'));
// add the selected option to the selectedAnwsers Array
selectedAnswers.push(selectedOption);
/** here I am assuming that you are using the questionNum variable
to track the current question Number **/
questionNum += 1;
/** here I am again checking if I have reached the end of test and
thus log the answers
Instead of logging the answer you can create a function
that compares the result and display it on screen **/
if(questionNum >= questions.length) {
console.log(selectedAnswers);
return;
}
// update the next question text
questionEl.textContent = questions[questionNum];
// update next options
displayQuestion(questionNum);
}
//loop through all the elements with class clickOption
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', clickOption);
}
start.addEventListener("click", function() {
timer();
/** I have updated the displayQuestion call implementation
so that the function is called with a parameter
(here the parameter it is zero) **/
displayQuestion(questionNum);
start.style.visibility = "hidden";
buttonEl.style.visibility = "visible";
});
/**Finally I have updated the display question method
so that it updates the option buttons based on the index parameter **/
function displayQuestion(index){
questionEl.textContent = questions[index];
option0.textContent = answers[index][0];
option1.textContent = answers[index][1];
option2.textContent = answers[index][2];
option3.textContent = answers[index][3];
}
Hope this solution helps you. Happy Coding!
I am getting a Table from a database like this (row numbers may vary):
|Player 1|Player 2|
-------------------
|Danny |Danny |
|John |John |
|Mary |Mary |
I want to select two names, one from each Player column, and store them in two variables, say player1_id and player2_id which I will later use to insert data into the database. I also want to highlight the names when they are clicked. The highlight and the associated variable value should change when I click on another name.
For example, let's say I click on Danny and John from Player 1 and Player 2 respectively. These two names should get highlighted and the variables should get player1_id = "Danny" and player2_id = "John". If I change my mind and click on Mary on the Player 2 column, Mary should get highlighted, John should lose its highlight and player2_id should change to "Mary"
So far I managed to sort of getting only the highlight part (but when I click more than one names all stay highlighted). Could anyone point me to a correct direction, please?
Here is the JSFiddle code of what I have so far
try this: https://jsfiddle.net/dunsondog109/behcgwLf/7/
function inputClickHandler(e){
e = e||window.event;
var all = document.getElementsByTagName("td");
var tdElm = e.target||e.srcElement;
var tdIndex = tdElm.cellIndex;
var numberOfColumns = 2;
if(tdElm.style.backgroundColor == 'rgb(46, 204, 64)'){
tdElm.style.backgroundColor = '';
} else {
for (var i=0;i<all.length;i++) {
if (i%numberOfColumns==tdIndex%numberOfColumns) {
// It is in the same column
all[i].style.backgroundColor = '';
}
}
tdElm.style.backgroundColor = '#2ECC40';
}
}
You need to reset all the tds in your column first and then set the td that was clicked
maybe it will not help you, but this is what I created for fun ...
As I'm jQuery user I find it difficult to list the table for any actions using plain javascript ... I would prefer having list of players in some object, draw the table based on that list. Instead of adding css to table cell i would add class like active and then just easily remove / move that class to different player. Maybe even adding some classes or other data-attributes to the table cells to help identify correct row / cell ... Anyway, everything is possible, but with this design you will not get far with your project I think. Good luck.
var Game = function() {
var players = {};
var table = document.querySelector('#myTable');
var rows = table.querySelectorAll('tr');
function uncheckPlayers(col) {
for ( var i=0; i<rows.length; i++ ) {
var tds = rows[i].querySelectorAll('td');
for ( var x=0; x<tds.length; x++ ) {
if ( col === x ) {
tds[x].style.backgroundColor = '';
}
}
}
}
for ( var i=0; i<rows.length; i++ ) {
var tds = rows[i].querySelectorAll('td');
for ( var x=0; x<tds.length; x++ ) {
tds[x].addEventListener('click', function() {
var id = x;
return function() {
uncheckPlayers(id);
players[id] = new Player(id, this.innerText);
this.style.backgroundColor = 'red';
console.log(players);
}
}(x));
}
}
}
var Player = function(id, name) {
this.name = name;
this.id = id;
this.score = 0;
console.log(this);
};
var Game = new Game();
<html>
<head>
<title>Find table cell value on cell (table) click using JavaScript</title>
</head>
<body>
<center>
Click on table below to select Players.
<br />
<br />
</center>
<table align="center" id="myTable" border="1" style="cursor: pointer;">
<tr>
<th>Player 1</th><th>Player 2</th>
</tr>
<tr>
<td>Danny</td><td>John</td>
</tr>
<tr>
<td>John</td><td>Danny</td>
</tr>
<tr>
<td>Mary</td><td>Mary</td>
</tr>
</table>
<br />
</body>
</html>
I have this problem here
The problem has been solved, but my question is how can I get the second value from that, or the third one. The sheet will have many tables and at some point I will need a total for each table. Also, is there any solution to automatically find the the array number which contain date row for each table (instead defining this manually). Hope my explanation make sense.
Thank you!
Kind regards,
L.E. Test file
If I understood your question correctly, instead of breaking the loop when a match to "Total" is found do whatever is needed to be done within the loop like so...
var today = toDateFormat(new Date());
var todaysColumn =
values[5].map(toDateFormat).map(Number).indexOf(+today);
var emailDate = Utilities.formatDate(new Date(today),"GMT+1",
"dd/MM/yyyy");
for (var i=0; i<values.length; i++){
if (values[i][0]=='Total'){
nr = i;
Logger.log(nr);
var output = values[nr][todaysColumn];
// Do something with the output here I"m assuming you email it
}
}
The loop will keep going and find every "Total" and do the same thing. This answer assumes that the "Totals" are in the same column. You can get fancier with this if you only want certain tables to send and not others, but this should get you started.
I didn't quite understand the second part of your question...
"Also, is there any solution to automatically find the the array
number which contain date row for each table (instead defining this
manually). Hope my explanation make sense."
I'm guessing you want all the rows that contain "Total" in the specific column. You could instantiate a variable as an empty array like so, var totals = [];. Then instead of sending the email or whatever in the first loop you would push the row values to the array like so, totals.push(nr+1) . //adding 1 gives you the actual row number (rows count from 1 but arrays count from 0). You could then simply loop through the totals array and do whatever you wanted to do. Alternatively you could create an array of all the values instead of row numbers like totals.push(values[nr][todaysColumn]) and loop through that array. Lots of ways to solve this problem!
Ok based on our conversation below I've edited the "test" sheet and updated the code. Below are my edits
All edits have been made in your test sheet and verified working in Logger. Let me know if you have any questions.
Spreadsheet:
Added "Validation" Tab
Edited "Table" tab so the row with "Email Address" in Column A lines up with the desired lookup values (dates or categories)...this was only for the first two tables as all the others already had this criteria.
Code:
Create table/category selector...
In the editor go to File >> New >> HTMLfile
Name the file "inputHTML"
Copy and paste the following code into that file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form class="notice_form" autocomplete="off" onsubmit="formSubmit(this)" target="hidden_iframe">
<select id="tables" onchange="hideunhideCatagory(this.value)" required></select>
<p></p>
<select id="categories" style="display:none"></select>
<hr/>
<button class="submit" type="submit">Get Total</button>
</form>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// The code in this function runs when the page is loaded.
$(function() {
var tableRunner = google.script.run.withSuccessHandler(buildTableList);
var catagoryRunner = google.script.run.withSuccessHandler(buildCatagoryList);
tableRunner.getTables();
catagoryRunner.getCategories();
});
function buildTableList(tables) {
var list = $('#tables');
list.empty();
list.append('<option></option>');
for (var i = 0; i < tables.length; i++) {
if(tables[i]==''){break;}
list.append('<option>' + tables[i] + '</option>');
}
}
function buildCatagoryList(categories) {
var list = $('#categories');
list.empty();
list.append('<option></option>');
for (var i = 0; i < categories.length; i++) {
if(categories[i]==''){break;}
list.append('<option>' + categories[i] + '</option>');
}
}
function hideunhideCatagory(tableValue){
var catElem = document.getElementById("categories");
if(tableValue == "Total Calls By Date" || tableValue == "Total Appointments by Date"){
catElem.style.display = "none"
document.required = false;
}else{
catElem.style.display = "block"
document.required = true;
}
}
function formSubmit(argTheFormElement) {
var table = $("select[id=tables]").val(),
catagory = $("select[id=categories]").val();
console.log(table)
google.script.run
.withSuccessHandler(google.script.host.close)
.getTotal(table,catagory);
}
</script>
</body>
<div id="hiframe" style="display:block; visibility:hidden; float:right">
<iframe name="hidden_iframe" height="0px" width="0px" ></iframe>
</div>
</html>
Edits to Code.gs file
Replace code in Code.gs with this...
//This is a simple trigger that creates the menu item in your sheet
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Run Scripts Manually')
.addItem('Get Total','fncOpenMyDialog')
.addToUi();
}
//This function launches the dialog and is launched by the menu item
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('inputHTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(200)
.setHeight(150);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Select table to get total for');
};
//main function called by clicking "Get Total" on the dialogue...variables are passed to this function from the formSubmit in the inputHTML javascript
function getTotal(table,catagory) {
function toDateFormat(date) {
try {return date.setHours(0,0,0,0);}
catch(e) {return;}
}
//get all values
var values = SpreadsheetApp
.openById("10pB0jDPG8HYolECQ3eg1lrOFjXQ6JRFwQ-llvdE2yuM")
.getSheetByName("Tables")
.getDataRange()
.getValues();
//declare/instantiate your variables
var tableHeaderRow, totalRow, tableFound = false;
//begin loop through column A in Tables Sheet
for (var i = 0; i<values.length; i++){
//test to see if values have already been found if so break the loop
if(tableFound == true){break;}
//check to see if value matches selected table
if (values[i][0]==table){
//start another loop immediately after the match row
for(var x=i+1; x<values.length; x++){
if(values[x][0] == "Email Address"){ //This header needs to consistantly denote the row that contains the headers
tableHeaderRow = x;
tableFound = true;
}else if(values[x][0] == "Total"){
totalRow = x;
break;
}
}
}
}
Logger.log("Header Row = "+tableHeaderRow)
Logger.log("Total Row = "+ totalRow)
var today = toDateFormat(new Date())
var columnToTotal;
if(catagory==''){
columnToTotal = values[tableHeaderRow].map(toDateFormat).map(Number).indexOf(+today);
}else{
columnToTotal = values[tableHeaderRow].indexOf(catagory);
}
var output = values[totalRow][columnToTotal];
Logger.log(output);
var emailDate = Utilities.formatDate(new Date(today),"GMT+1", "dd/MM/yyyy");
//here is where you would put your code to do something with the output
}
/** The functions below are used by the form to populate the selects **/
function getTables(){
var cFile = SpreadsheetApp.getActive();
var cSheet = cFile.getSheetByName('Validation');
var cSheetHeader = cSheet.getRange(1,1,cSheet.getLastRow(),cSheet.getLastColumn()).getValues().shift();
var tabelCol = (cSheetHeader.indexOf("Tables")+1);
var tables = cSheet.getRange(2,tabelCol,cSheet.getLastRow(),1).getValues();
return tables.filter(function (elem){
return elem != "";
});
}
function getCatagories(){
var cFile = SpreadsheetApp.getActive();
var cSheet = cFile.getSheetByName('Validation');
var cSheetHeader = cSheet.getRange(1,1,cSheet.getLastRow(),cSheet.getLastColumn()).getValues().shift();
var catagoriesCol = (cSheetHeader.indexOf("Catagory")+1);
var catagories = cSheet.getRange(2,catagoriesCol,cSheet.getLastRow(),1).getValues();
return catagories.filter(function (elem){
return elem != "";
});
}
I've an html page which has many dynamically created input boxes. The number of text boxes vary each time.
I want to calculate the sum of the numbers the user has entered, and disply it. When the user delete one number the sum should auto calculate.
How can i do it with javascript?
Thanks
In jQuery something like this should work with a few assumptions:
$('.toAdd').live('change', function() {
var total = 0;
$('.toAdd').each(function () {
total += $(this).val();
});
$('#total').val(total);
});
The assumptions being that your input fields all have the class 'toAdd' and that your final input field has an ID of 'total'.
In pure JS:
var elems = document.getElementsByClassName('toAdd');
var myLength = elems.length,
total = 0;
for (var i = 0; i < myLength; ++i) {
total += elems[i].value;
}
document.getElementById('total').value = total;
Let me elaborate when I review my notes but here is a high level answer that I believe will work... (My Java Script is very rusty)...
Make the input boxes share an attribute (or use tag) so you can get a collection to walk through no matter the size... Then on the onkeyup event on every input call this function that will sum the totals. Put the result into another entry with the ID you know beforehand...
You will have to validate input because if one of them is not a number then the total will also be "NAN"
Okay here is a complete working example you can build off of that I just threw together: It obviously needs a great deal of polishing on your end...
<html>
<head>
<script language="javascript">
function AddInputs()
{
var total = 0;
var coll = document.getElementsByTagName("input")
for ( var i = 0; i<coll.length; i++)
{
var ele = coll[i];
total += parseInt(ele.value);
}
var Display = document.getElementById("Display");
Display.innerHTML = total;
}
</script>
</head>
<body>
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<span id="Display"></span>
</body>
</html>