Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to simulate a click with JavaScript ?
The getElementById() produces an object of element which represents the element whose id attribute matches the provided string. Because element IDs must be unique if supplied, they're a convenient method to rapidly retrieve a single element.
Whenever you click on the onclick event it does some actions like displaying a message or redirects the user another page. The onclick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.
The ‘textContent’ property of the element, is used to set or return the content of the text. This property returns the string value as an element of the content of text.
Syntax
The following is the syntax for the simulate a click with JavaScript −
element.textContent = text
Parameter
text − specifies the element of the text content
Steps
Follow the below-given steps to simulate a click in JavaScript.
Step 1 − Let’s define the style for the paragraph element of the HTML Document which is going to show the count of the clicks after clicking the button.
Step 2 − Under the body section, we defined the heading tags, paragraph tag, button and script elements.
Step 3 − For the button element, the simulateClick() method is defined. Using this method number of clicks will be counted when we press the button.
Step 4 − The textContent is the HTML DOM Element property used to set the content text.
Step 5 − After clicking the button, the onClick event function is triggers and it counts the number of clicks.
Example
In this example, we are going to see how can we count number of clicks whenever we click the button.
<html>
<head>
<style>
#text {
color: blue;
font-weight: bold;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h2>Simulating a click with JavaScript</h2>
<p id="text">Tutorix is clicked number of <span class="noofclicks"></span> times</p>
<button type="button" onclick="simulateClick()">
Click Here to see the Count of Clicks
</button>
<script>
let clicks = 0;
function simulateClick() {
clicks = clicks + 1;
document.querySelector('.noofclicks').textContent = clicks;
}
</script>
</body>
</html>
Example
Let us see another example of simulating a click in JavaScript. Here, we are going to show alert function event when we click the button. After the alert function occur is completed, then we are going to see designated URL which is specified in the anchor tag.
The addEventListener() function is employed to associate an event handler with a specific element. It has no effect on the current event handlers. Events are thought to be a necessary component of JavaScript. A web page replies to an event that has happened. Events can be produced by users or through APIs. An event listener is a JavaScript process that waits for an occurrence to take place. The addEventListener() method is a JavaScript constructor function. We can add numerous event handlers to an element without overwriting the current ones.
<html>
<body>
<h2>Simulating a click with the Alert Message Using the JavaScript</h2>
<div style="text-align:center;">
<a href= "https://www.tutorialspoint.com/" style="text-align:center;" id= "simulatelink">Click</a>
</div>
<script>
var set = document.getElementById('simulatelink');
set.addEventListener('click', () => alert('Simulating a Click using JavaScript'))
</script>
</body>
</html>
Conclusion
In this article, we have successfully explained how to simulate a click using the Javascript along with the examples. We have used the two different examples, in the first example, we used the querySelector, and textContent property. For the second example, we have used the addEventListener, getElementById, and alert function to simulate a click.
1K+ Views
