La propriété "valeur" n'existe pas sur la valeur du type "HTMLElement"
je joue avec le texte dactylographié et j'essaie de créer un script qui mettra à jour un élément p Au fur et à mesure que le texte est saisi dans une boîte de saisie.
le html se présente comme suit:
<html>
<head>
</head>
<body>
<p id="greet"></p>
<form>
<input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
</form>
</body>
<script src="greeter.js"></script>
</html>
Et le greeter.ts
fichier:
function greeter(person)
{
return "Hello, " + person;
}
function greet(elementId)
{
var inputValue = document.getElementById(elementId).value;
if (inputValue.trim() == "")
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}
quand je compile avec tsc
j'obtiens le "error" suivant:
/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'
cependant le compilateur produit un javascript fichier, qui fonctionne très bien dans chrome.
comment se fait-il que j'ai cette erreur? Et comment puis-je résoudre ce problème?
en outre, Où puis-je chercher quelles propriétés sont valides sur un 'HTMLElement'
selon dactylographié?
s'il vous plaît noter que je suis très nouveau à javascript et typescript, donc je pourrais manquer quelque chose d'évident. :)
8 réponses
basé sur la réponse de Tomasz Nurkiewiczs, le" problème " est que le code typographique est sûr. :) Ainsi le document.getElementById()
renvoie le type HTMLElement
qui ne contient pas de propriété value
. Le sous-type HTMLInputElement
contient cependant la propriété value
.
donc une solution est de mouler le résultat de getElementById()
à HTMLInputElement
comme ceci:
var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;
<>
est l'opérateur de coulée en caractères typographiques. Voir la question Tapescript: casting HTMLElement .
le javascript résultant de la ligne ci-dessus ressemble à ceci:
inputValue = (document.getElementById(elementId)).value;
, c'est-à-dire ne contenant aucune information sur le type.
essayez de lancer l'élément que vous voulez mettre à jour dans HTMLInputElement. Comme indiqué dans les autres réponses, vous devez indiquer au compilateur qu'il s'agit d'un type spécifique de HTMLElement:
var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);
si vous utilisez react, vous pouvez utiliser l'opérateur as
.
let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
le problème est ici:
document.getElementById(elementId).value
vous savez que HTMLElement
retourné de getElementById()
est en fait une instance de HTMLInputElement
en héritant parce que vous passez un ID d'élément d'entrée. De même, en Java statiquement typé, cela ne compilera pas:
public Object foo() {
return 42;
}
foo().signum();
signum()
est une méthode de Integer
, mais le compilateur connaît seulement le type statique de foo()
, qui est Object
. Et Object
ne avoir une méthode signum()
.
mais le compilateur ne peut pas le savoir, il ne peut se baser que sur des types statiques, pas sur le comportement dynamique de votre code. Et pour autant que le compilateur sache, le type d'expression document.getElementById(elementId)
n'a pas la propriété value
. Seuls les éléments d'entrée ont de la valeur.
Pour un contrôle de référence HTMLElement
et HTMLInputElement
dans MDN. Je suppose que le style typographique est plus ou moins cohérent. avec ces.
Une solution rapide pour cela est d'utiliser [ ] pour sélectionner l'attribut.
function greet(elementId) {
var inputValue = document.getElementById(elementId)["value"];
if(inputValue.trim() == "") {
inputValue = "World";
}
document.getElementById("greet").innerText = greeter(inputValue);
}
je viens d'essayer quelques méthodes et de trouver cette solution,
Je ne sais pas quel est le problème derrière ton scénario original.
pour référence, vous pouvez vous référer au billet de Tomasz Nurkiewicz.
aussi pour toute personne utilisant des propriétés comme des accessoires ou des références sans votre "Docgetid's" alors vous pouvez:
("" as HTMLInputElement).value;
où les guillemets sont la valeur de vos accessoires, donc un exemple serait comme ceci:
var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
exemple mis à jour:
const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = InputElement.value
de la Documentation:
problème:
error Property 'text' n'existe pas sur le type' HTMLElement '
Solution: en typographie, nous devons lancer document.getElementById()
qui renvoie le type HTMLElement
en < HTMLScriptElement >
donc nous pouvons le faire en suivant la voie pour résoudre l'erreur comme prévu par dactylographié.js
Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;
ça a marché pour moi.. espérons que cela fonctionne pour vous aussi bien.