web-dev-qa-db-fra.com

Comment enregistrer les entrées de l'utilisateur dans une variable en HTML et en js

je fais un jeu et au début il vous demande votre nom. Je veux que ce nom soit enregistré en tant que variable. j'ai ce code html:

<form id="form" onsubmit="return false;">
<input   style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput">
<input   style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="name()">
</form>

et c'est une partie javascript:

function name()
{
var input = document.getElementById("userInput");
alert(input);
}
javascripthtmluser-input
6
Hamzah Malik

Cela ne fonctionne pas car name est un mot réservé en JavaScript. Changez le nom de la fonction en autre chose.

Voir http://www.quackit.com/javascript/javascript_reserved_words.cfm

<form id="form" onsubmit="return false;">
    <input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" />
    <input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" />
</form>

function othername() {
    var input = document.getElementById("userInput").value;
    alert(input);
}
17
PiLHA

Tout d'abord, rendez votre balisage plus portable/réutilisable. J'ai également défini le type de boutons sur 'button' au lieu d'utiliser l'attribut onsubmit. Vous pouvez basculer l'attribut type sur submit si le formulaire doit interagir avec un serveur.

<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
    <lable id='nameLable' for='nameField'>Create a username:</lable>
    <input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
    <button id='subButton' type='button'>Print your name!</button>
</div>
</form>

<div>
    <p id='result'></p></div>
</div>

Ensuite, écrivez une fonction générale permettant de récupérer le nom d'utilisateur dans une variable. Il vérifie que la variable contenant le nom d'utilisateur comporte au moins trois caractères. Vous pouvez changer cela en une constante de votre choix.

function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');

if (nameField.length < 3) {
    result.textContent = 'Username must contain at least 3 characters';
    //alert('Username must contain at least 3 characters');
} else {
    result.textContent = 'Your username is: ' + nameField;
    //alert(nameField);
}
}

Ensuite, j'ai créé un écouteur d'événement pour le bouton. Il est généralement considéré comme une mauvaise pratique d’avoir des appels js en ligne.

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);

Voici une démo de travail légère et stylée:

CodePen démo de cette réponse.

5
NickersF

Comme je l’utilise sur PHP et JavaScript:

<input type="hidden" id="CatId" value="<?php echo $categoryId; ?>">

Mettre à jour le JavaScript:

var categoryId = document.getElementById('CatId').value;
1
Amranur Rahman

Changez votre javascript pour:

var input = document.getElementById('userInput').value;

Cela va obtenir la valeur qui a été types dans la zone de texte, pas un objet DOM

1
Tom G