All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Get Element By Name

Last Updated : Jul 1, 2023

JavaScript Get Element By Name

In this article we will show you the solution of JavaScript get element by name, a name attribute may be assigned to any element in an HTML page.

The name attribute permits more HTML components to share the same value as the id attribute does.

You can use the document object's getElementsByName() method to retrieve all items with a given name.

The function getElementsByName() accepts a name, which is the value of an element's name property, and returns a live NodeList of the element's elements.

The elements return collection is operational. It implies that whenever items that have the same name are added to it or excluded from the document, its return elements are instantly updated.

Now move to the concept of javascript get element by name.

Step By Step Guide On JavaScript Get Element By Name :-

The return value of the getElementsByName() method is a collection of all the elements of a specific document organised by name.

This group of items is known as a node list, and the index can be used to browse over each node list component.

The document name is accepted by this function. Further collections of elements are returned by this function.

Syntax:

document.getElementsByName(name)
<!DOCTYPE html>
<html>
<head>
<title>Javascript get element by name</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
function tk() {
alert(document.getElementsByName("t")[0].value);
}
</script>
</head>
<body>
<h1>Talkerscode</h1>
<h2>Javascript get element by name</h2>
<input type="text" name="t" />
<br>
<br>
<input type="button" onclick="tk()"
value="Click here" />
</body>
</html>
  1. Using the HTML and Head tags, we begin our code. Here, we use the TITLE element to construct the page's title.
  2. Finally, using the STYLE tag, we implement the CSS stylesheet, using the h1 element's green colour and the body element's text alignment as a centre.
  3. After that, the style is finished, and the script is started.
  4. To display things at a specific name, we construct a function in script called tk.
  5. To print the result entered by the user, we then utilise the getelementbyname function with the alert method.
  6. After that, we terminate the script and use the BODY tag to begin the code body.
  7. We write some statements in the body of the code using the H1 tag and some other statements using the H2 tag.
  8. Next, we write the text using the input type method.
  9. Next, we build the button with the onclick event, which will trigger the function when the user presses the button.
  10. The BODY and HTML elements are where our code concludes.

Conclusion :-

The idea of javascript retrieve element by name has thus been successfully learned.

We also discovered that the getElementsByName() method of the document object may be used to fetch all objects with a specific name as well as the function getElementsByName() receives a name, the value of the name attribute of an element, and gives a real NodeList of an item's elements.

The collection of returned elements is operational.

I hope this article on JavaScript get element by name helps you and the steps and method mentioned above are easy to follow and implement.