En este proyecto, he escrito un script que genera el costo total de cualquier palabra que escriba en un cuadro de texto. El costo es de $6.00 por carta.
También estoy tratando de hacer que el script genere el costo total + 7% de impuestos. El problema es que la ecuación no está calculando el total correctamente. En cambio, la ecuación es poner el costo y el impuesto uno al lado del otro en lugar de sumarlos. Entonces, por ejemplo, si el impuesto es de $2,1 y el total es de $30, se escribe así "$302,1" en lugar de "$32,1".
Aquí hay un fragmento del código (el último código en Javascript es con el que tengo el problema)
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>Solo necesita envolver sus matemáticas en otro paréntesis. Está tomando la cadena de "Total: $" + como si desea concatenar y convertirá la salida en una cadena de forma preventiva. Si pones los paréntesis, obtienes las matemáticas y el resultado correctos.
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>Otra forma de insertar fácilmente variables, los resultados de las llamadas a funciones o evaluar expresiones matemáticas es mediante el uso de literales de plantilla (cadenas de plantilla) .
`string text ${expression} string text` Lo que sea que esté entre ${ y } se evalúa antes de convertirlo en una cadena.
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>Hay diferentes formas de abordar este problema 1) use parseInt tal como lo hice en el código a continuación o también podría agregar un operador unario (+) al problema que enfrenta porque; Agregar cadenas que contienen números NO los agrega. En cambio, las cadenas se concatenan
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>