DASHservices Posted December 6, 2020 Share Posted December 6, 2020 Site URL: https://www.dashservices.me/test-calculator I'd like to add a few simple calculators to my site. They will require user input in a text field followed by a button click which fires the code to retrieve the user input, do a calculation and display the result in a text field. I've used a single code block on an otherwise empty page. In the code block window, HTML is checked and 'Display Source' is not checked. The code entered in the code block is: <br> Square feet of driveway: <input type="text" id="drivewayarea"/><br><br> Thickness of driveway (in inches): <input type="text" id="drivewaythickness"/><br><br> <input type="button" value="Calc" onclick="formdata()"/><br><br> Estimated cubic yards: <input type="text" id="cubicyards"/><br> <script> function formdata() {var thickness=parseFloat(document.getElementById("drivewaythickness").value)||0; var area= parseFloat(document.getElementById("drivewayarea").value||0; document.getElementById("cubicyards").value=((area*thickness)/(36^3)).ToString(); }</script> The user is to enter a value for square feet and another for inches. The code calculates the area when button 'Calc' is clicked. The area is then displayed in the third text box. I've included the url of the page. I'm new to squarespace and javascript. But the code is simple and straightforward. Could someone suggest what steps I might take to make the code active? Beyondspace 1 Link to comment
Solution Beyondspace Posted December 7, 2020 Solution Share Posted December 7, 2020 11 hours ago, DASHservices said: Site URL: https://www.dashservices.me/test-calculator I'd like to add a few simple calculators to my site. They will require user input in a text field followed by a button click which fires the code to retrieve the user input, do a calculation and display the result in a text field. I've used a single code block on an otherwise empty page. In the code block window, HTML is checked and 'Display Source' is not checked. The code entered in the code block is: <br> Square feet of driveway: <input type="text" id="drivewayarea"/><br><br> Thickness of driveway (in inches): <input type="text" id="drivewaythickness"/><br><br> <input type="button" value="Calc" onclick="formdata()"/><br><br> Estimated cubic yards: <input type="text" id="cubicyards"/><br> <script> function formdata() {var thickness=parseFloat(document.getElementById("drivewaythickness").value)||0; var area= parseFloat(document.getElementById("drivewayarea").value||0; document.getElementById("cubicyards").value=((area*thickness)/(36^3)).ToString(); }</script> The user is to enter a value for square feet and another for inches. The code calculates the area when button 'Calc' is clicked. The area is then displayed in the third text box. I've included the url of the page. I'm new to squarespace and javascript. But the code is simple and straightforward. Could someone suggest what steps I might take to make the code active? Correct snippet should be <br> Square feet of driveway: <input type="text" id="drivewayarea"/><br><br> Thickness of driveway (in inches): <input type="text" id="drivewaythickness"/><br><br> <input type="button" value="Calc" onclick="formdata()"/><br><br> Estimated cubic yards: <input type="text" id="cubicyards"/><br> <script> function formdata() { var thickness = parseFloat(document.getElementById("drivewaythickness").value) || 0; var area = parseFloat(document.getElementById("drivewayarea").value || 0); document.getElementById("cubicyards").value = ((area * thickness) / (36 ^ 3)).toString(); } </script> Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment