Jump to content

Button won't fire code

Go to solution Solved by Beyondspace,

Recommended Posts

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?

Link to comment
  • Solution
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>

image.png.629146605af8ad0fe1435c9951b5f5fa.png

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 plugin
If 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.