How to get value in javascript

With the rapid development of modern web development, JavaScript has become one of the most important languages ​​​​in web front-end development. In JavaScript, obtaining values ​​is a very basic and important operation, and it is also an indispensable part of daily development work. This article will introduce methods and techniques for obtaining different types of values ​​​​in JavaScript, and provide some practical cases.

1. Get the value of the input box

In web development, we usually need to obtain input data from the user, such as user input in the form input box. JavaScript provides several methods to get the value of the input box, including:

1. Get the input box by id

The simplest way to get the input box is through Get the element by id, and then get the value of the element. For example, for an input box with the id "input", you can use the following code to get its value:

let inputEle = document.getElementById('input');
let inputValue = inputEle.value;

2. Get the input box by name

In addition to passing the id Get the input box, we can also get the input box through the name attribute. This method is suitable for forms containing multiple input boxes. We can obtain the input box element with the specified name attribute by looping through the form elements.

let forms = document.forms;
for (let i = 0; i < forms.length; i++) {
  let inputEle = forms[i].elements['username'];
  let inputValue = inputEle.value;
}

2. Get the values ​​of radio buttons and check boxes

In forms, we often need to get the values ​​of radio buttons and check boxes. Different from getting the value of input box, getting the value of radio button and check box requires using some different methods.

1. Get the selected radio button value

For the radio button box, we need to loop through the radio button box, find the selected element and get its value.

let radios = document.getElementsByName('gender');
let radioValue;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    radioValue = radios[i].value;
    break;
  }
}

2. Get the values ​​of multiple check boxes

For check boxes, we may need to get multiple values ​​of the selected check box. At this time, we need to use the method of looping through the check boxes and storing the value of the selected check box in an array.

let checkboxes = document.getElementsByName('hobbies');
let checkboxValues = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkboxValues.push(checkboxes[i].value);
  }
}

3. Get the value of the drop-down list

The drop-down list is also a common form element, and we need to get the selected value from it. Like the radio button, we need to loop through the drop-down list, find the selected element and get its value.

let selectEle = document.getElementById('city');
let selectValue = selectEle.options[selectEle.selectedIndex].value;

4. Get the value of the URL parameters

In web development, we often need to get the parameter values ​​in the URL. JavaScript provides some methods to obtain parameter values ​​in the URL, such as URLSearchParams and location.search attributes.

1. URLSearchParams

URLSearchParams is a new API that can easily parse URL query strings. We can use its get method to obtain the value of the specified parameter.

let params = new URLSearchParams(location.search);
let id = params.get('id');

2. location.search

If you want to get the parameter value in the URL, you can use the location.search property of the global object window object. location.search returns the query part of the URL (the part starting with the question mark ?).

let searchStr = window.location.search;
let params = new URLSearchParams(searchStr);
let id = params.get('id');

5. Summary

This article mainly introduces how JavaScript can obtain different types of values, including obtaining values ​​from form input boxes, radio boxes, check boxes and drop-down lists, and from Get parameter values ​​from URL. No matter what type of value it is, JavaScript provides corresponding methods to obtain it. We only need to choose the appropriate method according to actual needs. In daily development work, understanding these methods will bring great convenience and efficiency to your work.

The above is the detailed content of How to get value in javascript. For more information, please follow other related articles on the PHP Chinese website!