Maison  >  Article  >  interface Web  >  Comment lire la ville du district en javascript

Comment lire la ville du district en javascript

PHPz
PHPzoriginal
2023-04-21 14:14:06384parcourir

JavaScript est un langage de programmation largement utilisé dans le développement Web et est populaire car il est facile à apprendre et à utiliser. Pour les débutants, il est très important de comprendre les bases des variables et types de données, des opérateurs, des instructions conditionnelles, des instructions de boucle, etc. en JavaScript. Cet article présentera comment JavaScript lit les entrées pour aider les lecteurs à mieux apprendre et appliquer ce langage.

  1. Lire la saisie de la zone de texte

En JavaScript, vous pouvez obtenir l'élément HTML via la méthode getElementById() dans l'objet document et lire l'attribut value de l'élément. Ceci est utile lors de la lecture d’une entrée de zone de texte. Par exemple, l'extrait de code suivant montre comment lire l'entrée d'une zone de texte qui contient un attribut id :

var input = document.getElementById("myInput");
var inputValue = input.value;

Où "myInput" est la valeur de l'attribut id de la zone de texte. La variable inputValue contiendra la valeur saisie dans la zone de texte.

  1. Lire la saisie des boutons radio et des cases à cocher

Pour les éléments de formulaire tels que les boutons radio et les cases à cocher, vous pouvez utiliser l'extrait de code suivant pour lire leur état de sélection :

var radioBtn = document.getElementsByName("myRadioBtn");
var checkbox = document.getElementById("myCheckbox");

var radioSelectedValue;
for(var i=0; i<radioBtn.length; i++){
    if(radioBtn[i].checked){
        radioSelectedValue = radioBtn[i].value;
        break;
    }
}

var checkboxValue = checkbox.checked;

Où, "myRadioBtn" et "myCheckbox" sont l'identifiant valeurs d'attribut du groupe de boutons radio et de la case à cocher respectivement. Lors de la lecture des boutons radio, en parcourant tous les éléments du bouton radio, seul l'attribut value de l'élément sélectionné sera affecté à la variable radioSelectedValue. Lors de la lecture de la case à cocher, la propriété checkbox.checked renverra vrai ou faux, indiquant si la case à cocher est sélectionnée.

  1. Lire la saisie de la liste déroulante

Une liste déroulante est un élément de formulaire très courant qui offre plusieurs options parmi lesquelles les utilisateurs peuvent choisir. En JavaScript, vous pouvez obtenir la valeur de l'option sélectionnée par :

var select = document.getElementById("mySelect");
var selectedOption = select.options[select.selectedIndex].value;

où "mySelect" est la valeur d'identifiant de la liste déroulante. Grâce à la propriété options de l'objet select, vous pouvez obtenir un objet HTMLCollection contenant les options fournies par la liste déroulante. Grâce à l'attribut selectedIndex, vous pouvez obtenir la valeur d'index de l'option actuellement sélectionnée. Enfin, lorsque vous obtenez la valeur d'une option sélectionnée, lisez simplement sa propriété value.

  1. Lire les entrées d'événements de souris

En plus de la saisie d'éléments de formulaire, JavaScript peut également lire les entrées de l'utilisateur via les événements de souris. Par exemple, le code suivant montre comment déclencher un événement lorsqu'un bouton est cliqué :

var button = document.getElementById("myButton");
button.addEventListener("click", function(){
    // 这里是事件触发时执行的代码
});

Dans cet exemple, "myButton" est la valeur d'identification d'un bouton. Un écouteur d'événement click est ajouté au bouton via la méthode addEventListener(). Lorsque l'utilisateur clique sur le bouton, le code dans l'écouteur d'événements sera exécuté.

Résumé

Avec la méthode ci-dessus, nous pouvons facilement lire différents types de saisies utilisateur. Dans les applications pratiques, nous pouvons également obtenir des effets frontaux interactifs de diverses manières. En maîtrisant ces compétences, nous pouvons appliquer JavaScript de manière plus flexible pour créer de meilleures applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Comment utiliser les CSSArticle suivant:Comment utiliser les CSS