I am busy learning Javascript programming for college. As I am new to javascript ,I need some clarity on a function a the book has given me to work on please.
The below is a simple calculation in JS to multiply a user input value by 100 and then multiple it on another input value.
function calcStaff() {
"use strict";
var num = document.getElementById("photognum");
var hrs = document.getElementById("photoghrs");
totalCost -= photographerCost;
photographerCost = num.value * 100 * hrs.value;
totalCost += photographerCost;
document.getElementById("estimate").innerHTML = "$" + totalCost;
}
The code works fine and everything run perfect. However I do not understand why we need the following code "totalCost -= photographerCost;"
When I comment this line out it does mess up the calculation , but I dont understand why.
Could someone please explain this Assignment Operator.
Kind Regards
Unless totalCost and photographerCost are set prior to that line within the context that the function is in, it is completely unnecessary. In fact, especially with the "use strict", if there is no other relevant code, then I am surprised that it is not breaking the code.
So actually by that logic those values must be set elsewhere in the code. They're probably set at a global level so that they can be used in other calculations. So that line of code is removing the old photographerCost from the totalCost before calculating and adding in the new photographerCost.
Related
I know the basics of what I need to do here, but my attempt at coding it is riddled with problems so here is what I want to do.
Define a series of strings to be called up into a function that types it onto the screen with a slight delay between each letter.
I've found some examples of people making typewriter title cards, but these are not designed to be used like functions that can be called up on the fly. For this particular project, we need the text to function like a makeshift dialog system that won't be called up until the function is called with a specific string.
Like a button with " onclick="dialogFunction(idOfStringToBeTyped) "
what I have looks like this:
var d1Example = "Hello, I am example dialog";
function dialog(dialogString) {
var i;
for (i = 0; i <= dialogString.length(); i++) {
document.write( dialogString.charAt(i) );
java.lang.Thread.sleep(50);
}}
So my attempts to code the content has been... brute force-y...
EDIT: to include my attempt, should have been there in the first place, sorry about that.
This, in theory, should work, but in practice does nothing. I probably have a syntax error. but really it doesn't make sense to me why this doesn't work.
You should look into the JavaScript functions setTimeout and Math.random().
You can use Math.random() to create a floating point integer between 0 and 1.
var multipule = 5
var rand = Math.random(); // 0.5680401974599227
var randInSeconds = rand * multipule // 2.840200987299614
var waitInSeconds = Math.round(randInSeconds) // 3
Then use the the setTimeout out method to call the code that writes each character. setTimeout takes two parameters, a function and the number of seconds:
var writeCharacter = function(){
...
};
setTimeout(writeCharacter, 300);
I'll leave it to you to work out all the timing.
I am trying to code a simple function in JavaScript which generate random values in (0,10) and asks the user to guess these numbers. Since I am new with JavaScript I wrote this code which not working. So I need your help to figure out how can I fix it.
Your last if statement in Guessing checks whether the counter is below 5. Remove that statement and you are good to go. Since counter is defined as a global variable, it is increased in the guessGame function even without you giving it as parameter and once it's =5 your code stops executing.
A tip if you are new to programming in general: If your code stops working at a magic value,(5 in this case), it's always a good idea to search it in your code with ctrl+f.
Edit after comment:
You are thinking readInput as a blocking function, it's not. Your do...while function executes readInput every time, and reads the same value from the input box and processes it as wrong. To fix it, remove your Guessing function, put readInput in your html, and at the end of your readInput add the guessGame function where you do your comparison with the random numbers. Try with 1 number first.
Fun fact: Even guessing supposed to work as you intended, it would generate a new set of random numbers at each click, thus make the game much harder.
With 1 number, your code is like this :
html:
Guess : <input type="text" id="nb"/> <input type="button" value="Check" onclick="readInput()"/>
javascript:
var ranval=generateRandom();
var counter=0;
function readInput(){
var input = parseInt(document.getElementById('nb').value);
if (counter<5){
guessGame(input);
}
counter++;
if (counter==5){
console.log("you lost")
}
}
function generateRandom(){
//the 3 random values to be used later
rand1 = Math.floor(Math.random() * 10) ;
ranval=rand1;
}
function guessGame(input){
if (ranval==input){
console.log("correct")
}
}
I am getting a false truth from this script, and it's baffling. Using virtuals in nodejs. 'XFactor' is essentially a scale from 0.0 to 1.0 which represents the relationship between variable 1 and variable 2.
Schema.virtual('XFactor').get(function() {
if (this.variable1 > this.variable2) {
var x = 1/2 * (this.variable2 / this.variable1);
} else {
var x = 1- 1 / 2 * this.variable1 / this.variable2;
}
return x.toFixed(2);
});
For a while this code has been working. Yet it is unreliable for some reason. The if clause if (this.variable1 > this.variable2) seems to sometimes evaluate as true even when it isn't, and thereby the wrong portion of code is run. In case it is relevant, Variable 1 and Variable 2 are also virtuals, calculated in preceding sections of code. They are integers.
I'm delighted to be able to answer my own question! For some reason, the other virtuals I was using in this script, despite being numbers, were not numbers according to Javascript. To carry out accurate numerical functions, therefore, I had to convert them. I did this using the Number() function. Once this was done then everything worked as expected.
This is probably really simple, but for the life of me I can't work out how to do it. So here goes: I have a large form with lots of text boxes, which are all currency based and so need to be rounded off to 2 decimal places. The values of these textboxes are all generated dynamically by some JavaScript functions I wrote, and I can use .toFixed(2); to round them up/down to 2 decimal places. However, it gets tiring and repetitive to have to put this after working out each value of each textbox. How could I write a simple piece of JavaScript (can be jQuery) to target all the textboxes and round them ALL to 2 decimal places?
Thanks for any help :)
P.S Sorry for the lack of any code, but there isn't really any to show, as its all locked up in big functions. But here's what I'm essentially doing:
function workOutSomeVal() {
// lots of code to work out values and stuff
var finalValue = some mathematical equation to work out value;
var anotherValue = a different value;
$(".some-textbox").val((finalValue).toFixed(2));
$(".another-textbox").val((anotherValue).toFixed(2));
} // my question is, how could I get rid of .toFixed(2) and put in a generic statement somewhere to target all the textboxes?
You can have a function you call that does this:
function roundTextBoxes() {
$("input[type=text]").val(function() {
return (+this.value).toFixed(2);
});
}
...and then call that any time any of them changes. Live Example: http://jsbin.com/toyoc/1
It will probably mean that sometimes, a user looking at the page who does the mental arithmetic will find that it doesn't quite add up...
You can give a common class to all the textboxes which you want to be "roundable", and then select then using that class and apply your rounding logic to each of them.
// let's say all the roundable textboxes have the class "roundable"
$('.roundable').each(function() {
var value = // some mathematical equation to work out value
$(this).val((value).toFixed(2));
});
Another appoach:
Why don't you put value.toFixed(2) at the end of your calculation ?
var finalValue = function(){
// var value = some calculation
return value.toFixed();
}
Or - if you need the full value elsewhere, create a new function:
var finalValueView = function(){
finalValue().toFixed(2);
}
function workOutSomeVal() {
// ...
$(".some-textbox").val(finalValueView);
}
Use Math.round(num * 100) / 100
I've seen there are quite a few questions about decimal precision and display in Javascript. the thing is that I came to a solution that I thought it was gonna be enough for me'
The key thing is that I'm trying to parse to a string to round and then back to numbers using expressions like this.
return parseFloat(num.toFixed(2));
But there are some cases that it doesn't work as expected. To be honest I'm not sure if it has to do with the way I'm using ko or the javascript code for parsing I put in place. But let's say that in the below fiddle you type 14.385 in the upper text box, both fields will be properly rounded and will display the correct number of decimals, but without deleting the number you add 3333 (that means 14.393333) and the upper one won't be rounded. That's just an example because there are some strange behaviours.
Yo can see the fiddle here http://jsfiddle.net/RTexF/
Thanks
Edit. I add the code as per judgeja indication (I didn't understand the reason to ask for a code when you link fiddle, I see the point now)
The script
var decimalValue = 0.25;
function ViewModel() {
var self = this;
self.submittedValue = ko.observable(decimalValue);
self.percentage = ko.computed({
read: function() {
alert('read');
if (isNaN(parseFloat(self.submittedValue())))
return '';
var num = self.submittedValue() * 100;
return parseFloat(num.toFixed(2));
},
write: function(value) {
alert('write');
value = isNaN(value) ? '' : parseFloat((value / 100).toFixed(4));
self.submittedValue(value);
},
owner: self
});
}
ko.applyBindings(new ViewModel());
And the html
<p><input data-bind="value:percentage"></input></p>
<p><input data-bind="value:submittedValue"></input></p>
EDIT:
Know that it's an old one but I wanted to note that adding this to the write method
self.percentage.notifySubscribers(value);
it fixes the issue (ideally we could check against the current value and just notifiy if it actually changes)
Fiddle : http://jsfiddle.net/RTexF/1/ and http://jsfiddle.net/RTexF/2/
It may help you to think about this if you put an alert("read") in the read: and an alert("write") in the write: and then run your example again.
When you change the top box the first time the bottom box is written to through the write and then the top box is re-computed as the submittedValue observable has changed and you'll see the read for percentage being hit.
Next time you edit the top box the write will be hit again as we're changing the value, which makes sense, but since the submittedValue isn't changed, then the read won't happen again as the observable it depends upon won't have changed.