I am a student and very new to JS, like this is my first project dealing with it. With that being said, please excuse how juvenile my coding may seem to you experts. I followed the instructions of my project...
I am trying to figure out how to show a confirm of what the user types in the input. I have read through the similar previous questions but none of them are as basic as my coding so I do not know how to follow those examples to correct my issue.
Also, I cannot figure out why my total is combining the numbers side by side instead of adding them together. I have tried many different variations of these operations but cannot figure out what I am doing wrong.
Can someone help me figure out how to show what the user entered and how to add the cost and tax for a total vs them combining? Any help is appreciated.
var tileLetters;
var cost = 3;
var taxes = 0.08;
function confirmEntry() {
tileLetters= document.getElementById("letters").text; document.getElementById("confirm").innerHTML= tileLetters;
}
function calculateCost() {
tileLetters = document.getElementById("letters").value;
var tileCount= tileLetters.length;
var spaceCount= (tileLetters.split(" ").length - 1);
var tax= (tileCount - spaceCount) * cost;
document.getElementById("cost").innerHTML= "Subtotal $" + (tileCount - spaceCount) * cost;
document.getElementById("taxes").innerHTML= "Plus taxes $" + (tileCount - spaceCount) * cost * taxes;
document.getElementById("total").innerHTML= "Your total cost is $" + (tileCount - spaceCount) * cost * taxes + ((tileCount - spaceCount) * cost);
}
<input id="letters" type="text" name="entry"><br>
<button onclick="confirmEntry() + calculateCost()">Calculate Your Cost</button>
<p id="confirm">You entered</p>
<p id="cost">Cost</p>
<p id="taxes">plus taxes</p>
<p id="total">Total cost</p>
An input box doesn't have a property called .text
. You probably wanted .value
:
tileLetters = document.getElementById("letters").value;
Your code is adding the numbers onto the end rather than mathematically adding them because it is treating this as a string concatenation rather than a numeric operation (e.g. think what happens when you do "Hello" + " World"
- it gives you "Hello World"
). To get it to behave how you want; you need to ensure that both things you are adding are numbers.
One way to do this is the parseFloat
function. This takes a string, and converts it to a floating point number; e.g. parseFloat("6")
gives you 6.0
rather than the "6"
you had before.
first of, in order to get the value from input you need to do this:
function confirmEntry() {
tileLetters= document.getElementById("letters").value;// value not text
document.getElementById("confirm").innerHTML= tileLetters;
}
secound it will not work all the time since you can add letters to numbers. so you can check if its a number maybe with simple js function isNaN(). check out this
You are doing some mistakes in your HTML. This is what you're looking for:
To get the value of an input box, you reference it by .value
.
Example:
function calculate() {
var valueOfInputBox = document.getElementById("input-box").value;
document.getElementById("result").innerHTML = valueOfInputBox;
}
<input id="input-box" type="text">
<button onclick="calculate()">Submit</button><br>
Result: <a id="result"></a>
I'm trying to iterate over a simple array using recursion. For this specific case, I'm trying to recreate .map() using recursion (without using .map()!. I currently am only pushing the last element ...
I'm trying to iterate over a simple array using recursion. For this specific case, I'm trying to recreate .map() using recursion (without using .map()!. I currently am only pushing the last element ...
Consider a matrix B= [[6,4,1,2], [5,3,9,7],[1,3,2,1]];. B is a matrix with three rows and four columns. I want to treat it as an array or a vector, namely B1=[6,4,1,2,5,3,9,7,1,3,2,1]. Moreover, I ...
Consider a matrix B= [[6,4,1,2], [5,3,9,7],[1,3,2,1]];. B is a matrix with three rows and four columns. I want to treat it as an array or a vector, namely B1=[6,4,1,2,5,3,9,7,1,3,2,1]. Moreover, I ...
I have some code running in an html page that is calling a function that exists on window.external. The code works: SomeCode.js (lives in somePage.html): window.external['someFunction'](); However, ...
I have some code running in an html page that is calling a function that exists on window.external. The code works: SomeCode.js (lives in somePage.html): window.external['someFunction'](); However, ...
So in sql a common thing to do is a select statement with a group by and then a having count =1 or what have you. select bID from tableA groubBy bID having count(*) = 1 Essentially I am looking to ...
So in sql a common thing to do is a select statement with a group by and then a having count =1 or what have you. select bID from tableA groubBy bID having count(*) = 1 Essentially I am looking to ...