Leave a comment

Accessing HTML page elements in JavaScript Console

While working with HTML pages during design or prototyping, most of the times we have to access the HTML page elements and depending upon some user action values of those HTML elements can be manipulated. In this post, we will explore the ways to access different HTML elements while working with user data and manipulating the data assigned to them.

Here is a sample HTML page with text boxes defined for getting the user data

<html>
	<head>
		<title>This is test document</title>
	</head>
	<script type="text/javascript">
	</script>
	<body>
		First Text:  <input type="text" id="text_01"><br>
		Second Text: <input type="text" id="text_02"><br>
		<input type="button" value="Click">
	</body>
</html>

When we open this html page in browser, this is how it looks like:

HTML elements for user input

HTML elements for user input

Accessing data from text box

Now, suppose user provides input 1 and 2 in first and second text box resp. In JavaScript console we will use document.getElementById() method to access the text box values.

But, how do we identify the element Id. Well the easy way is just to look at the HTML document and copy the text box id. This process is simple when you have a very small HTML page.

But in case of complex and long HTML page, there is small utility inspect element(can be accessed by doing Right Click on HTML element) which is very helpful to identify the element details.

Inspect element id

Inspect element id

In JavaScript console, this is how we access the element data

Accessing element value

Accessing element value

alert statement will give the following result

first text box value

first text box value

Leave a Reply

Your email address will not be published.


five + = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>