Hello,
I am completely new to Javascript and my employers would like me to create a Property Tax Calculator. I have never learned Javascript and I’m struggling with this. I have no one here to ask (small town and small business, I’m a designer, but they keep asking me to code!).
I know the calculation and I know some of the code I’ll need (from researching this for 2 days), but I can’t put them together to get it to work. I also need an input field on my page, as the client needs to input their own value to make the calculation work. The calculation is:
Fair Market Value X 45% = Portioned Assessment
Portioned Assessed value X 30.915/1000 = Gross Taxes
I know I need my function to look kind of like this:
function PortionedAssessment() {
var GrossTax = var FMValue * .45 * .030915;
My variables:
var PortAssess;
var GrossTax;
var FMValue = document.getElementsByName("FMValue").value;
And I have part of my form (no styling done yet, I’ll do that afterwards):
Enter your Fair Market Value: X 45% X 0.030915
Gross Taxes = ;
I’m not sure how to put the calculation together or how to input the answer into my form. How do you direct a console.log to a div?
Next, you need references to the relevant elements. The easiest way would be to get those elements by ID, as there can always be only one such element in the document (or should be at any rate):
var fmValue = document.getElementById('fm-value')
var grossTaxes = document.getElementById('gross-taxes')
Then you’ll have to add an event listener to the input element, so that the result updates when the input value changes. The listener takes a function as its 2nd argument, which will be called whenever such a change event occurs (i.e. a callback function):
// This is fixed, so we can assign it to a variable
// from the start
var factor = 0.01391175
fmValue.addEventListener('change', function () {
// Cast the value of the input element to a number
// and calculate the result; "this" refers to the element
// to which the listener was added, i.e. fmValue
var result = Number(this.value) * factor
// Set the text content of the output element
// to that result
grossTaxes.textContent = result
})
You might also use an input event instead of a change event, so that the result updates during typing. Oh, and one note about those inline event handlers like onclick="..." – don’t do this. This is a very outdated way to handle user events, and mixing languages like that leads to code that quickly gets hard to debug and maintain.
Thank you so much for your quick response and for your explanation. That helps a lot! I understand how to output the answer now by getting the Element by ID and to select their answer from the input box using that same method. I also understand making the factor variable, but I will admit, I’m confused about the addEventListener. Could I not just create a simple function to calculate? And then on my Calculate button, call the function on the onclick? (I apologize if my questions are silly, but I don’t actually know!)
Thank you for letting me know about the onclick as well! I wasn’t aware it was outdated, I guess I was reading some older tutorials and trying to hack together what I could. If I don’t want the results to update while I’m typing, but to change only when I click a button would I use an onchange event or oninput? I have just been looking at other people’s code and they do an onclick=“function()”. But that’s an older way of doing it? I haven’t been able to find a way that makes sense to me yet!
The rest makes sense I believe! Again, thank you so much for your help, your explanations really help me understand the reasoning behind it. I don’t just want to take code that I don’t understand and use it. I want to learn HOW to use Javascript. So I really appreciate it!
That’s what we actually did. :-) It just happened to be an anonymous function in place of the 2nd argument, but we could of course declare a function outside the listener as well – functions can be passed around like any other arguments in JS:
function calculate () {
var result = Number(fmValue.value) * factor
grossTaxes.textContent = result
}
fmValue.addEventListener('change', calculate)
I just replaced this with an explicit fmValue reference here so that we can also use the function elsewhere, namely…
So now we could just as well pass that function to a click listener of a given button:
// Another way to get element references is with regular
// CSS selectors -- of course, you might as well give the
// the button another ID
var calcButton = document.querySelector('.calcButton')
calcButton.addEventListener('click', calculate)
Probably… although I have the impression that some people just consider it easier. The “advantage” is that you don’t have to get the reference to a given element, but at the expense of mixing markup and logic. For instance, by just looking at your JS code nobody would know where that calculate() function is actually supposed to be called. There are other advantages of .addEventListener() like the aforementioned this binding, although you probably don’t have to worry about this at this point.
Oh okay, that makes sense. I guess there are a lot of different ways to do this then. Can I add an addEventListener to a button and create a button? And does it have to be in a form? Or does that matter? I keep finding that others add it into a form and add this to their Javascript: ‘var theForm = document.forms[“PropertyCalc”];’
Thank you so much for your explanations! You’re very kind!
Yes, an event listener can basically be added to any element. whether it makes sense depends on the type of the element and the type of the event, of course – a change listener on a div will never fire. With creating, do you mean dynamically using JS?
No, not necessarily. It only has to be in a form if you want to submit the input value(s) to the backend for further processing, like storing them in a database and the like.
Yes, document.forms is a collection of all forms on the page, but they are numerically indexed. And given a reference to a form (no matter how you obtained it) you can access individual input elements inside a form by their name attribute, like e.g.
<form>
<input name="foo" value="bar" />
</form>
var myForm = document.forms[0]
console.log(myForm.foo.value) // Logs "bar"
I think in cases where you have several forms on a page, it’s better to get the form references by ID or a unique class though; this way your JS can stay agnostic about the actual order of the forms.