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. :)

123
demandé sur Bjarke Freund-Hansen 2012-10-20 19:07:45

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.

262
répondu Bjarke Freund-Hansen 2017-05-23 12:34:47

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);
33
répondu woodysan 2012-10-20 15:54:38

si vous utilisez react, vous pouvez utiliser l'opérateur as .

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
18
répondu Michael 2017-05-06 18:06:20

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.

12
répondu Tomasz Nurkiewicz 2012-10-20 15:39:41

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.

8
répondu inDream 2012-10-20 15:46:38

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);
6
répondu KidKode 2018-01-09 09:26:12

exemple mis à jour:

const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = InputElement.value

de la Documentation:

Tapuscrit - Types de Base de Type affirmations

1
répondu Leo 2018-09-25 10:04:45

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.

-1
répondu Alok Adhao 2017-04-12 09:15:04