In this project, Ive written a script which outputs the total cost of any word you type into a textbox. The cost is $6.00 per letter.
I am also to trying to get the script to output the total cost + 7% tax. The issue is that the equation is not calculating the total properly. Instead the equation is putting the cost and tax right next to eachother instead of adding them up. So for example, if the tax is $2.1 and the total is $30, it's wrtiting it like this "$302.1" instead of like this "$32.1".
Here's a snippet of the code (the very last code in the Javascript is the one im having the issue with)
var customTitle;
var cost = 6;
function calculateCost() {
customTitle = document.getElementById("titleBox").value;
var titleLetters = customTitle.length;
var spaceCount = (customTitle.split(" ").length - 1);
document.getElementById("output1").innerHTML = customTitle;
document.getElementById("checkout").innerHTML = "Your Order Summary";
document.getElementById("output2").innerHTML = "Title: " + customTitle;
document.getElementById("output3").innerHTML = "Cost: $" + (titleLetters - spaceCount) * cost;
document.getElementById("output4").innerHTML = "Tax: $" + (titleLetters - spaceCount) * cost * .07;
document.getElementById("output5").innerHTML = "Total: $" + (titleLetters - spaceCount) * cost * .07 + (titleLetters - spaceCount) * cost;
}<html>
<body>
<main>
<p>Type your custom title below</p>
<form>
<input id="titleBox" type="text">
<button onclick="calculateCost()" type="button">Generate & Checkout</button>
</form>
</main>
<aside>
<p id="output1"></p>
<h3 id="checkout"></h3>
<p id="output2"></p>
<p id="output3"></p>
<p id="output4"></p>
<p id="output5"></p>
</aside>
</body>
</html>You just need to wrap your math in another parentheses. It is taking the string of "Total: $" + as you wanting to concatenate and will convert the output to a string pre-emptively. If you put the parentheses you get the right math and output.
var customTitle;
var cost = 6;
function calculateCost() {
customTitle = document.getElementById("titleBox").value;
var titleLetters = customTitle.length;
var spaceCount = (customTitle.split(" ").length - 1);
document.getElementById("output1").innerHTML = customTitle;
document.getElementById("checkout").innerHTML = "Your Order Summary";
document.getElementById("output2").innerHTML = "Title: " + customTitle;
document.getElementById("output3").innerHTML = "Cost: $" + (titleLetters - spaceCount) * cost;
document.getElementById("output4").innerHTML = "Tax: $" + (titleLetters - spaceCount) * cost * .07;
document.getElementById("output5").innerHTML = "Total: $" + ((titleLetters - spaceCount) * cost * .07 + (titleLetters - spaceCount) * cost);
}<html>
<body>
<main>
<p>Type your custom title below</p>
<form>
<input id="titleBox" type="text">
<button onclick="calculateCost()" type="button">Generate & Checkout</button>
</form>
</main>
<aside>
<p id="output1"></p>
<h3 id="checkout"></h3>
<p id="output2"></p>
<p id="output3"></p>
<p id="output4"></p>
<p id="output5"></p>
</aside>
</body>
</html>Another way to easily insert variables, the results of function calls, or evaluate math expressions, is by using Template literals (Template strings).
`string text ${expression} string text`
Whatever is in between ${ and } gets evaluated before its converted to a string.
var customTitle;
var cost = 6;
function calculateCost() {
customTitle = document.getElementById("titleBox").value;
var titleLetters = customTitle.length;
var spaceCount = (customTitle.split(" ").length - 1);
document.getElementById("output1").innerHTML = customTitle;
document.getElementById("checkout").innerHTML = "Your Order Summary";
document.getElementById("output2").innerHTML = `Title: ${customTitle}`;
document.getElementById("output3").innerHTML = `Cost: $${(titleLetters - spaceCount) * cost}`;
document.getElementById("output4").innerHTML = `Tax: $${(titleLetters - spaceCount) * cost * .07}`;
document.getElementById("output5").innerHTML = `Total: $${(titleLetters - spaceCount) * cost * .07 + (titleLetters - spaceCount) * cost}`;
}<html>
<body>
<main>
<p>Type your custom title below</p>
<form>
<input id="titleBox" type="text">
<button onclick="calculateCost()" type="button">Generate & Checkout</button>
</form>
</main>
<aside>
<p id="output1"></p>
<h3 id="checkout"></h3>
<p id="output2"></p>
<p id="output3"></p>
<p id="output4"></p>
<p id="output5"></p>
</aside>
</body>
</html>There are different ways to tackle this issue 1) use parseInt just like I did in the below code or you could also append a unary operator(+) to the problem you faced because; Adding strings that contain numbers does NOT add them. Instead, the strings are concatenated
var customTitle;
var cost = 6;
function calculateCost() {
customTitle = document.getElementById("titleBox").value;
var titleLetters = customTitle.length;
var spaceCount = (customTitle.split(" ").length - 1);
var totalCost = (titleLetters - spaceCount) * cost * .07 + (titleLetters - spaceCount) * cost
document.getElementById("output1").innerHTML = customTitle;
document.getElementById("checkout").innerHTML = "Your Order Summary";
document.getElementById("output2").innerHTML = "Title: " + customTitle;
document.getElementById("output3").innerHTML = "Cost: $" + (titleLetters - spaceCount) * cost;
document.getElementById("output4").innerHTML = "Tax: $" + (titleLetters - spaceCount) * cost * .07;
document.getElementById("output5").innerHTML = "Total: $" + totalCost;
}<html>
<body>
<main>
<p>Type your custom title below</p>
<form>
<input id="titleBox" type="text">
<button onclick="calculateCost()" type="button">Generate & Checkout</button>
</form>
</main>
<aside>
<p id="output1"></p>
<h3 id="checkout"></h3>
<p id="output2"></p>
<p id="output3"></p>
<p id="output4"></p>
<p id="output5"></p>
</aside>
</body>
</html>