Script non fonctionnel

Fermé
OpeVince - Modifié le 10 juin 2021 à 17:50
 Totox - 13 juin 2021 à 21:43
Salut tous le monde, j'ai besoin de votre aide.
Je suis entrain de tester de faire un addon pour mozilla ( module complémentaire).
Mais je n'arrive pas à faire fonctionner mon script qui pourtant est le plus simple du monde.
Help me please ^^'

code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Lire une valeur dans un champs de texte</title>
<meta charset="utf-8">
<style>
#bouton {margin-top: 12px;}
</style>

<script>
function afficher(){
alert(document.getElementById("texte").value);
}
</script>

<body> 
<div align="center">
<h3>Afficher une valeur en alerte</h3>
<form>
<input type="text" id="texte"  value="" size="30"><br>
<input type="button" id="bouton" value="Afficher" size="30" onclick="afficher()"><br>

</form>
</div>
</body>
</html>
A voir également:

1 réponse

Salut,
euh ça ressemble pas à un Addon pour navigateur ça mais à une page HTML.
Pour un Addon pour Firefox il faut utiliser XML et JavaScript, éventuellement voir du côté des scripts intégrés avec GreaseMonkey par exemple.

Bref la question portant sur une page HTML le script fait bien ce que vous lui demandez j'ai l'impression:

Afficher la value d'un champ de texte.
Celui ci étant définit à vide vous aurez un affichage vide.

<input type="text" id="texte"  value="" size="30">

Donc virez l'attribut value définit à une chaîne vide("") si vous voulez récupérer autre chose en JavaScript avec HTMLElement.value.

C'est assez trivial comme erreur. Je vous conseille avant tout d'être au point avec HTML(la balise FORM par exemple qui est mal formée et ne comprends pas les éléments nécessaires) et de ne pas confondre un attribut HTML avec une valeur de JavaScript comme cela semble le cas ici.

Vous pouvez aussi tester en utilisant la console(et la fameuse fonction console.log()) et ajouter du texte pour voir l'erreur plus facilement.
Cela s'appelle débogguer (en français) et est indispensable avec un langage script.

Exemple:

function afficher(){
console.log("ma valeur est "+document.getElementById("texte").value);
console.log.("ma chaîne de caractères comporte "+document.getElementById("texte").value.length+" caractères");
}

vous aurait indiqué l'erreur (une chaîne vide est affichée soit rien du tout) et console.log est nettement plus pratique pour ça qu'un message d'alerte.
La console permet aussi d'"afficher les erreurs de scripts et de HTML/CSS éventuelles.

JavaScript étant non typé il faut faire un cerrtain nombre de tests/sécurité sur chaque variable si ça ne fonctionne pas comme c'est prévu. Par exemple faire des calculs avec des lettres ou l'inverse, ou afficher un contenu vide va mener à des erreurs ou des résultats incohérent(comme vous avez fait ici : afficher du vide forcément c'est pas un résultat très probant).

Voir par exemple un test si une valeur est nulle (null) une chaîne vide ("") ou non défini ("undefined") comme ici:

https://www.tutorialspoint.com/check-if-value-is-empty-in-javascript

Pour un nombre il y a isNan(), pour comparer des Objets/Functions vous avez aussi les opérateurs instanceOf et typeOf pour vérifier les types:

https://www.w3schools.com/js/js_datatypes.asp

Aussi les méthodes toString() qui convertissent une variable en sa valeur en chaîne de caractères ou parseInt()/parseFloat() pour convertir en valeur numérique(bien sûr si la valeur n'est pas cohérente ça ne donnera rien, transformer une lettre en une valeur numérique ne ménéra à rien).


Voici mes fonctions "perso"(en librairie JS) pour tester :

//--si une valeur est non nulle, non vide ou non indéfinie
function isReal(any){  return any!==null && typeof any!=='undefined' ? true:false }

//-- si une valeur est non vide, vide ou nulle ou indéfinie
function isEmpty(any){  return isReal(any)? any!=[] && any!={} && any!='' ? false : true : null;}

//-- si c'est une chaîne de caractère vide ou pas
function isEmptyString(str){return str==='' || str==' '?true:false; }

/** NOTE: c'est une écriture en tertiaire équivalent de if else avec pour la condition IF(ce qu'il y a à gauche de  "?") alors(juste à droite de "?") else (à droite du symbole ":")
C'est à peu près la même chose(le tertiaire renvoi un valeur sans besoin d' l'opérateur Return et oblige à avoir un else) mais plus rapide à écrire.
*/
0