Adding two javascript functions(depending on input) - html

I have put together a calculator what calculates a price, depending on user input. It works fine with one input, but now I have to scale it a little with a second user input. But here's the catch: the user might not want to put anything to the field, so it will be empty. And that's the thing that brakes my code. I could duplicate the calculator function and return the values and add those two together in a third function, but it will not work when there's an empty value.
Just for the sake of it, some trivial HTML code:
//When I only calculate with this user input, its easy
<input type="text" id="rocktext"><br>
// But how to consider this and do the same exact calculations like with the
//first one and add those two result together?
<input type="text" id="rocktext2"><br>
The code in the end should look like:
Take first user input, calculate the price(like in code below)
IF(!!) there is a second user input, calculate the price and add it to
the first one
Am I being a moron to try it with JS or just a moron in the firstplace?
Hope to hear from You, guys!
J.
The initial JS code is as follows:
function priceCalc() {
var inputs = document.getElementById("rocktext").value;
var length = inputs.length;
var accept = 6;
var initPrice = 8;
if (inputs<=accept){
// Since the code is much simpler right now i just put the result in HTML as follows:
document.getElementById("rockpricetotal").innerHTML = initPrice + " dollars";
//I can also return the the value calculated here like so:
//retVal = initPrice;
}
else {
var intLength = parseInt(length, 10);
var lengthGap = intLength - accept;
var totals = lengthGap * 0.8 + initPrice;
var prec = totals.toPrecision(3);
// Since the code is much simpler right now i just put the result in HTML as follows:
document.getElementById("rockpricetotal").innerHTML = prec + " dollars";
// Here also the return clause can be possible with the calculation result like so:
//retVal = prec;
}
// And the final return as an alternative to the innerHTML :
// return retVal;
}

Making it scalable, you can add a class to all the inputs which may be in the function (something like calcInput), so you iterate all of them and if the value isn't empty (and if it's a valid number), you put it in the calculation.
Or you can just verify if the second input is empty, if so, calls functionOne, if not, calls functionTwo:
function twoDifferentWays() {
var valueOne = document.querySelector("#rocktext").value;
var valueTwo = document.querySelector("#rocktext2").value;
if (!!valueTwo && !isNaN(valueTwo)) {
callsFunctionOne(valueOne, valueTwo);
} else {
callsFunctionTwo(valueOne, valueTwo);
}
}

Related

Is there a way to sort a table based on a cell value in Angular?

My current table looks like this:
Status
Draft
Pending
Complete
I want to sort them based on the value of the cells. Is there a way to do that? I've only been able to sort them using this code:
onChange(status: string){
const sortState: Sort = {active: status, direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);
}
But I want to sort using the values of the status themselves since I'd want to create a button which when click sorts starting from complete or draft or pending.
I'm a little confused by your question, but I think I understand what you're asking.
You're going to want to convert your values into an array and then use the .sort() function. So, assuming you have an array of your cells, we can call that let array = Cell[], you can then access the status of the cells like this:
sortCells(){
let array = Cell[]; // here we're assuming there is already a cell type and a cell.active parameter, like shown in your example.
let possibleValues = ["Draft","Pending","Complete"]; // easier way to compare two values
array.sort((a,b)=>{
let aIndex = possibleValues.indexOf(a.active); // index of gets the location of the element in an array
let bIndex = possibleValues.indexOf(b.active);
if(a > b){
return -1;
} else if(b > a){
return 1;
}else{
return 0; // they are equal
}
})
}
You can read more about sort here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Word randomization in Actionscript

In Actionscript, I'm trying to find a way to produce strings and string variables which spit out different text each time they're brought up. To purely visualize:
var text:String "Red||Blue"; //Whenever the variable is called, it's either Red or Blue
textoutput("You spot a grey||black cat."); //A function equivalent of the same issue
I can produce a function which does this effect, but it seems a variable cannot be a function, as far as I can tell.
I've considered array variables, but I have no idea how to use an array to spit out a single entry when the variable is called, and I don't know how to make this work for a string that isn't a variable -- assuming I can get away with a single system that works for both situations.
Edit
To expand upon the issue expressed in Batman's answer, using his result on a variable produces a result that 'sticks' to whichever it randomly chooses. Example:
var shoes:String = grabRandomItem("Red shoes||Crimson shoes");
trace("You have " + shoes + ".") //Whichever result is chosen it stays that way.
Moreover, I may want to change this variable to something else that is entirely not-random:
var secondshoes:String = "Blue shoes";
function newshoes():
{
shoes = secondshoes;
}
You want a random value from a list of possible values. Rather than call the variable, you can reference it dynamically...
function random(low:Number=0, high:Number=1):Number {
/* Returns a random number between the low and high values given. */
return Math.floor(Math.random() * (1+high-low)) + low;
}
var options:Array = ["red", "blue", "grey", "black"];
trace("You spot a " + options[random(0, options.length-1)] + " cat.")
//You spot a black cat.
Alternatively, you can use a function in place of a variable to remove the inline logic...
function catColor():String { return options[random(0, options.length-1)]; }
trace("You found a " + catColor() + " key.")
// You found a red key.
Or generalize it to a generic function with arguments.
var options:Object = {
"cat":["grey", "black"],
"key":["gold", "silver"],
"door":["blue", "red", "green"]
}
function get(item:String):String {
return options[item][random(0, options[item].length-1)];
}
trace("You found a " + get("door") + " door.")
// You found a green door.
There are a ton of ways to do this, but to align with the way you'd like to do it, here is the simplest way to accomplish this:
//populate your string: (remove the word private if using timeline code)
private var text_:String = "Red||Blue||Green||Yellow";
//create a getter to use a function like a property
function get text():String {
//create an array by splitting the text on instances of ||
var arr:Array = text_.split("||");
//return a random element of the array you just made
return arr[Math.floor(Math.random() * arr.length)];
}
trace(text);
Even better, create a common function to parse your string:
function grabRandomItem(str:String):String {
var arr:Array = str.split("||");
return arr[Math.floor(Math.random() * arr.length)];
}
//make a getter variable that regenerates everytime it's called.
function get label():String {
return "You spot a " + grabRandomItem("grey||black||blue||red||purple") + " cat";
}
trace(label); //anytime you access the label var, it will re-generate the randomized string
trace(label);
trace(label);
trace(label);
// ^^ should have different results
Of course, this way I think only works best if the text comes from user input. If you are hard coding the text into the app, you might as well just create it in an array directly as show in another answer you have as there's less overhead involved that way.

How to merge the contents of two variables

I have many string variables that start with "Question" and then end with a number. ("Question1")
Each variable has a question in it ("How many times does it say E?")
There is an editable textbox on the stage that the user types in which question number he want to be displayed in a different textbox. ("1")
When the user clicks a button, I want that the text of Question1 should be displayed in the textbox.
My code looks like this:
var Question1:String = "How many times does it say E?" ;
var Question2:String = "How many times does it say B?" ;
var Question3:String = "How many times does it say A?" ;
myButton.addEventListener(MouseEvent.CLICK, displayQuestion);
function displayQuestion(event:MouseEvent):void
{
var QuestionNumber:Number = Number(userInputQuestionNumber.text);
textBoxDisplayQuestion.text= Question(QuestionNumber);
}
How can I get the textBoxDisplayQuestion to display the actual text of the Question??
(the code i have now obviously is not working!!)
But this example doesnt seem to work: I created a class called Question and here is the code:
import Question;
var QuNoLoad:Number;
var Qu1:Question = new Question(1,"how","yes","no","maybe","so","AnsB","AnsA");
trace(Qu1.QuNo, Qu1.Qu, Qu1.AnsA,Qu1.AnsB, Qu1.AnsC, Qu1.AnsD, Qu1.CorAns, Qu1.FaCorAns);
//the following is the code for the button
loadQu.addEventListener(MouseEvent.CLICK, loadQuClick);
function loadQuClick(event:MouseEvent):void
{
//this sets the variable "QuNoLoad" with the contents of the "textBoxQuLoad"
//imagine the user inputed "1"
QuNoLoad=Number(textBoxQuLoad.text);
//this SHOULD!! display the contents of "Qu1.Qu"
textQu.text= this["Qu"+QuNoLoad.toString()+".Qu"]
//and when i traced this statment the value was "undefined"
}
Why???
You can reference a variable by name using square brackets [] operator, such as:
this["Question" + QuestionNumber.toString()]
You may use this operator to dynamically set and retrieve values for a property of an object.
Keeping the question number as an integer, your function would be:
var Question1:String = "How many times does it say E?" ;
var Question2:String = "How many times does it say B?" ;
var Question3:String = "How many times does it say A?" ;
function displayQuestion(event:MouseEvent):void
{
var QuestionNumber:uint = uint(userInputQuestionNumber.text);
textBoxDisplayQuestion.text = this["Question" + QuestionNumber.toString()];
}
This is a pretty fundamental concept in programming that will make a lot of things harder to do until you understand it well, and it's pretty hard to explain without starting with some groundwork:
What's happening here is easiest to talk about with plain old Object rather than classes, so lets start with a very simple example:
var question1:Object = new Object();
question1.number = 1;
Note that with Object you didn't have to say that number existed ahead of time, it gets created when you set it. Now, when you say either question1.number you get 1, obviously. What is happening, however is that first question1 gets the value you stored in the variable question1 (which is { number: 1 }), then the .number gets the value stored in the property number stored in that value: 1.
To save some typing, you can use a shorthand called "object literals":
var question1 = {
number: 1
};
Now lets try a more complex object:
var question1 = {
number: 1,
text: "How many times does it say A?",
answers: {
a: 1,
b: 2,
c: 3,
d: 4,
correct: "b"
}
};
Now question1 is an object that has 3 properties, one of which, answers, is an object with 5 properties: a, b, c, d, and correct. This could also be written as:
var question1 = new Object();
question1.number = 1;
question1.text = "How many times does it say A?";
question1.answers = new Object();
question1.answers.a = 1;
question1.answers.b = 2;
question1.answers.c = 3;
question1.answers.d = 4;
question1.answers.correct = "b";
It should be pretty clear why the literal syntax exists now!
This time, if you say question1.answers.correct you get "b": first question1 gets you the { number: 1,...} value, then the .answers gets the { a: 1, b: 2,...} value, then finally the .correct gets the "b" value.
You should also know that this is a special variable that has a particular meaning in ActionScript (and JavaScript, on which it is based): it broadly refers to the object in when the code you are writing is inside: for "global" code (not inside a function), var adds properties to this object: var number = 2; and this.number = 2 are this same here. (This is not true when you're in function, this behaves differently there, sometimes in very strange ways, so be careful!)
Now you might start seeing what's happening: when you use [], for example, question1["number"], rather than question1.number, you are passing the property name you want to get as a String value, which means you can change what property you get while you are running, rather than when you compile ("runtime" vs. "compiletime"), but it also lets you get properties with names you can't refer to with the . syntax!
var strange = {
"a strange name? That's OK!": 1
};
trace(strange["a strange name? That's OK!"]);
So when you write this["Qu" + QuNoLoad.toString() + ".QuNo"], you create a name like "Qu2.QuNo", for example, you are trying to get a property with that exact name, . included, which doesn't exist! What you were trying to do the equivalent of: Qu2.QuNo could be written as this["Qu" + QuNoLoad].QuNo.
I shouldn't leave this without saying, though, that for something like this, I would use arrays, which exist so that you can use a single name to store a list of values:
var questions:Array = [ // set questions to an array with multiple questions
new Question(...),
new Question(...),
...
];
for each (var question:Question in questions) { // Look at each question in the array
if (question.QuNo == textBoxQuLoad.text) { // If this is the right question
loadQuestion(question);
break; // Found it, stop looking at each question by "breaking out" of the for each
}
}
There's lots more you can do with arrays, so read up on them when you get time.

Losing leading 0s when string converts to array

I have a textInput control that sends .txt value to an array collection. The array collection is a collection of US zip codes so I use a regular expression to ensure I only get digits from the textInput.
private function addSingle(stringLoader:ArrayCollection):ArrayCollection {
arrayString += (txtSingle.text) + '';
var re:RegExp = /\D/;
var newArray:Array = arrayString.split(re);
The US zip codes start at 00501. Following the debugger, after the zip is submitted, the variable 'arrayString' is 00501. But once 'newArray' is assigned a vaule, it removes the first two 0s and leaves me with 501. Is this my regular expression doing something I'm not expecting? Could it be the array changing the value? I wrote a regexp test in javascript.
<script type="text/javascript">
var str="00501";
var patt1=/\D/;
document.write(str.match(patt1));
</script>
and i get null, which leads me to believe the regexp Im using is fine. In the help docs on the split method, I dont see any reference to leading 0s being a problem.
**I have removed the regular expression from my code completely and the same problem is still happening. Which means it is not the regular expression where the problem is coming from.
Running this simplified case:
var arrayString:String = '00501';
var re:RegExp = /\D/;
var newArray:Array = arrayString.split(re);
trace(newArray);
Yields '00501' as expected. There's nothing in the code you've posted that would strip leading zeros. You may want to dig around a bit more.
This smells suspiciously like Number coercion: Number('00501') yields 501. Read through the docs for implicit conversions and check if any pop up in your code.
What about this ?
/^\d+$/
You can also specify exactly 5 numbers like this :
/^\d{5}$/
I recommend just getting the zip codes instead of splitting on non-digits (especially if 'arrayString' might have multiple zip codes):
var newArray:Array = [];
var pattern:RegExp = /(\d+)/g;
var zipObject:Object;
while ((zipObject = pattern.exec(arrayString)) != null)
{
newArray.push(zipObject[1]);
}
for (var i:int = 0; i < newArray.length; i++)
{
trace("zip code " + i + " is: " + newArray[i]);
}

What's the fastest way to search a very long list of words for a match in actionscript 3?

So I have a list of words (the entire English dictionary).
For a word matching game, when a player moves a piece I need to check the entire dictionary to see if the the word that the player made exists in the dictionary. I need to do this as quickly as possible. simply iterating through the dictionary is way too slow.
What is the quickest algorithm in AS3 to search a long list like this for a match, and what datatype should I use? (ie array, object, Dictionary etc)
I would first go with an Object, which is a hash table (at least, storage-wise).
So, for every word in your list, make an entry in your dictionary Object and store true as its value.
Then, you just have to check if a given word is a key into your dictionary to know whether the word the user has choosen is valid or not.
This works really fast in this simple test (with 10,000,000 entries):
var dict:Object = {};
for(var i:int = 0; i < 10000000; i++) {
dict[i] = true;
}
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0xff0000);
btn.graphics.drawRect(0,0,50,50);
btn.graphics.endFill();
addChild(btn);
btn.addEventListener(MouseEvent.CLICK,checkWord);
var findIt:Boolean = true;
function checkWord(e:MouseEvent):void {
var word:String;
if(findIt) {
word = "3752132";
} else {
word = "9123012456";
}
if(dict[word]) {
trace(word + " found");
} else {
trace(word + " not found");
}
findIt = !findIt;
}
It takes a little longer to build the dictionary, but lookup is almost instantaneous.
The only caveat is that you will have to consider certain keys that will pass the check and not necessarily be part of your words list. Words such as toString, prototype, etc. There are just a few of them, but keep that in mind.
I would try something like this with your real data set. If it works fine, then you have a really easy solution. Go have a beer (or whatever you prefer).
Now, if the above doesn't really work after testing it with real data (notice I've build the list with numbers cast as strings for simplicity), then a couple of options, off the top of my head:
1) Partition the first dict into a set of dictionaries. So, instead of having all the words in dict, have a dictionary for words that begin with 'a', another for 'b', etc. Then, before looking up a word, check the first char to know where to look it up.
Something like:
var word:String = "hello";
var dictKey:String = word.charAt(0);
// actual check
if(dict[dictKey][word]) {
trace("found");
} else {
trace("not found");
}
You can eventually repartition if necessary. I.e, make dict['a'] point to another set of dictionaries indexed by the first two characters. So, you'll have dict['a']['b'][wordToSearch]. There are a number of possible variations on this idea (you'd also have to come up with some strategy to cope with words of two letters, such as "be", for instance).
2) Try a binary search. The problem with it is that you'll first have to sort the list, upfront. You have to do it just once, as it doesn't make sense to remove words from your dict. But with millions of words, it might be rarther intensive.
3) Try some fancy data structures from open source libraries such as:
http://sibirjak.com/blog/index.php/collections/as3commons-collections/
http://lab.polygonal.de/ds/
But again, as I said above, I'd first try the easiest and simpler solution and check if it works against the real data set.
Added
A simple way to deal with keywords used for Object's built-in properties:
var dict:Object = {};
var keywordsInDict:Array = [];
function buildDictionary():void {
// let's assume this is your original list, retrieved
// from XML or other external means
// it contains "constructor", which should be dealt with
// separately, as it's a built-in prop of Object
var sourceList:Array = ["hello","world","foo","bar","constructor"];
var len:int = sourceList.length;
var word:String;
// just a dummy vanilla object, to test if a word in the list
// is already in use internally by Object
var dummy:Object = {};
for(var i:int = 0; i < len; i++) {
// also, lower-casing is a good idea
// do that when you check words as well
word = sourceList[i].toLowerCase();
if(!dummy[word]) {
dict[i] = true;
} else {
// it's a keyword, so store it separately
keywordsInDict.push(word);
}
}
}
Now, just add an extra check for built-in props in the checkWords function:
function checkWord(e:MouseEvent):void {
var word:String;
if(findIt) {
word = "Constructor";
} else {
word = "asdfds";
}
word = word.toLowerCase();
var dummy:Object = {};
// check first if the word is a built-in prop
if(dummy[word]) {
// if it is, check if that word was in the original list
// if it was present, we've stored it in keywordsInDict
if(keywordsInDict.indexOf(word) != -1) {
trace(word + " found");
} else {
trace(word + " not found");
}
// not a built-in prop, so just check if it's present in dict
} else {
if(dict[word]) {
trace(word + " found");
} else {
trace(word + " not found");
}
}
findIt = !findIt;
}
This isn't specific to ActionScript, but a Trie is a suitable data structure for storing words.