This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.
This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.
This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.
This is a neat little script that demonstrates two things:
1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.
2) Find and Replace – If both the Find and Replace boxes are filled in, then the findMyText() JavaScript function will do just that.
There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.
Here is a quick demo of the select all or none JavaScript function that automatically toggles all of your checkboxes in a given form.
Are you looking for a simple way to verify a form that you have? The example below demonstrates some of the common techniques used in verifying a form. Test out the form by leaving at least one of the fields blank before you submit the form.
The Document Object Model (DOM) allows for dynamic styling because it makes all HTML elements and attributes readily accessible using JavaScript. Here is a simple demo of how powerful this technology can be:
Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the script and it is set to 3.
Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.
We will cover how to implement this example later on in the tutorial but first let’s start with a simple example.