Overview of the JavaScript Button
The JavaScript button serves as a crucial component that enhances the interactivity of web pages. Integrating JavaScript buttons allows for a more visually appealing and user-friendly experience on websites. These buttons enable us to send and receive data, initiate click events, change the color of text, among other functionalities. In JavaScript frameworks, clickable buttons are typically defined using the HTML element < button >. When a button appears on the webpage, an event is triggered to execute a specific function. In this tutorial, we will delve into the process of creating JavaScript buttons utilizing an HTML tag and the createElement method, which is a fundamental tool in JavaScript frameworks.
Syntax:
Utilizing the <button> HTML element for JavaScript Button Implementation
<button onclick="testFunction()">Test Text</button>
The syntax presented above is predominantly employed in JavaScript frameworks such as AngularJS, ReactJS, and others.
varsampleButton = document.createElement(btn);
The Pure JavaScript Syntax displayed above is employed to create a JavaScript button.
What is a button?
A button is a component found on a webpage that, upon being clicked, triggers a specific action to occur. Typical functions of buttons encompass opening new pages, sending form data, and executing tasks on the current page. This guide will focus on employing HTML and JavaScript to develop buttons.
JavaScript Button Examples
Examine the examples provided below to understand the process of creating buttons in JavaScript.
Example 1
Creating a JavaScript button utilizing the <button> element
<!DOCTYPE html>
<html>
<body>
<h3>Creating button in JavaScript using HTML tag</h3>
<p>Here in this code we are not giving any linked pages or any data so when we click on the button it will not show anything</p>
<button type="button" id="btn">Click the button!</button>
<p id="samplebtn"></p>
<script>
</script>
</body>
</html>
Output
In the illustration provided above, we are utilizing the HTML <button> tag along with an id to construct a button. However, due to the absence of an event handler or associated functionality, the button will not respond to clicks.
Example 2
You can put a Click Event to the button.
<!DOCTYPE html>
<html>
<body>
<h3>Creating button in JavaScript using HTML tag</h3>
<p>Here in this code we are not giving any linked pages or any data so when we click on the button it will not show anything</p>
<button type="button" id="btn">Click the button!</button>
<p id="samplebtn"></p>
<script>
</script>
</body>
</html>
Output
In the example provided, we are utilizing the HTML <button> tag along with an id to generate a button. However, as there is no associated event handler or functional behavior implemented, clicking the button will not produce any action.
Example 3
You can click on a button to display text.
<!DOCTYPE html>
<html>
<body>
<h3>Using onClick event on JavaScript Button to display the hidden text</h3>
<p>JavaScript element will trigger an onClick function</p>
<button onclick="clickText()">Click on this button to show text</button>
<p id="btn"></p>
<script>
function clickText() {
document.getElementById("btn").innerHTML = "This is the hidden text";
}
</script>
</body>
</html>
Output
Before clicking on the button:
After clicking on the button:
Example 4
Displaying pop-up when we click the button.
<!DOCTYPE html>
<html>
<body>
<h2>Example for onClick event on button for pop up</h2>
<p>Click the below button to see a pop up with text</p>
<input type="btn" value="Alertbox" onclick="alert('This is a pop up box')">
</body>
</html>
Output
Before clicking Alertbox:
After clicking the Alertbox:
Example 5
Displaying Date and Time.
<!DOCTYPE html>
<html>
<body>
<h2>Example for displaying Data and Time</h2>
<button type="button"
onclick="document.getElementById('example').innerHTML = Date()">
Click here to show date and time</button>
<p id="example"></p>
</body>
</html>
Output
Before clicking on the button:
After clicking on the button:
Issues with accessibility
Icon Buttons
On the webpage, there exist buttons that lack labels and are represented solely by clickable icons. The absence of names for these buttons is intended to enhance accessibility. When the HTML code undergoes parsing, a tree structure is generated, which the screen reader utilizes to navigate the content of the page.
In instances where the button solely consists of an icon, we can assign a name to the button by incorporating text within it. This text serves as a clear identifier for the button, making it more comprehensible. A screen reader can utilize this identifier for navigation purposes. Furthermore, we can conceal the text visually by employing CSS properties to hide its visibility while still maintaining its usefulness for enhanced accessibility.
Size and proximity
The buttons displayed on the interface must be sufficiently large to allow users to click and interact with them effortlessly. The dimensions of the screen adjust according to the type of device being utilized. Therefore, the buttons need to be designed responsively to accommodate all variations in screen sizes.
When multiple buttons are present, it is essential to ensure adequate spacing between them to facilitate user interaction. In certain instances, buttons may not function effectively due to insufficient distance separating them.
Details of the ARIA state
The attribute that conveys the state information of the button is known as aria-pressed, which is part of the ARIA specification. When the button functions as a toggle, the aria-pressed attribute is utilized. The possible values for aria-pressed include:
false: There isn't a button press at this time.
true: There is a button pressed at this moment.
In this scenario, the button is considered to be in a partially pressed state.
undefined: Upon pressing the button, there is no response.
Clicking and paying attention
The button gains focus when it is clicked, depending on the web browser that is used to display the HTML code. Similarly, when the <input> tag is clicked or focused, it exhibits the same behavior.
It is possible to apply multiple event handlers to JavaScript buttons and some of them are given below:
- After pressing the button.
- Move your cursor over the button.
- On mouse away from the button.
- Upon pressing the button to submit a form or data (post method).
- Getting information out of a source (get method).
- Taking the button's focus away.
- Concentrating on the button.
- .disable is used to disable the button.
- Regarding the switch method.
In summary
We will now conclude our exploration of creating buttons using JavaScript. The functionality and application of JS buttons have been thoroughly examined. For our understanding, we have also reviewed several examples accompanied by brief explanations to aid our comprehension. A selection of event handler methods relevant to JavaScript buttons has been outlined. Additionally, we can engage with other events in a practical manner. Given that the majority of significant web pages incorporate buttons with various functionalities, JavaScript buttons contribute to the aesthetic appeal of the page.