451 Stimmen

Die Eigenschaft 'value' existiert nicht bei einem Wert vom Typ 'HTMLElement'.

Ich spiele gerade mit Typescript herum und versuche, ein Skript zu erstellen, das ein p-Element aktualisiert, wenn Text in ein Eingabefeld eingegeben wird.

Die Html-Datei sieht wie folgt aus:

<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>

Und die greeter.ts Datei:

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);
}

Wenn ich kompiliere mit tsc Ich erhalte den folgenden "Fehler":

/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'

Der Compiler gibt jedoch eine Javascript-Datei aus, die in Chrome einwandfrei funktioniert.

Wie kommt es, dass ich diese Fehlermeldung erhalte? Und wie kann ich ihn beheben?

Wo kann ich außerdem nachschlagen, welche Eigenschaften für eine 'HTMLElement' nach dem Typoskript?

Bitte beachten Sie, ich bin sehr neu zu javascript und typescript, so könnte ich etwas offensichtlich übersehen :)

7voto

Rohit Grover Punkte 113

Wenn Sie Angular verwenden, können Sie -

const element = document.getElementById('elemId') as HTMLInputElement;

2voto

jonathasborges1 Punkte 2201
  const handleMyEvent = (event : React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

    const input = (event.target as HTMLInputElement).value;
    console.log('handleMyEvent input -> ', input)

  }

1voto

Stebenwolf Punkte 31

Ich habe ein ähnliches Problem gehabt ( TS-Warnung in JS-Datei: "Eigenschaft X existiert nicht für Typ X": Ist es möglich, saubereres JavaScript zu schreiben? )

Während das Tag half, die Warnung in der Typescript-Datei zu entfernen, erhielt ich nach dem Kompilieren immer noch eine Warnung in meiner JavaScript-Datei.

Wie schreibe ich also Code, der sauber ist UND der es mir erlaubt, den Wert zu manipulieren?

Es hat einige Zeit gedauert, aber ich habe die Lösung mit Hilfe einer anderen Methode gefunden:

HTML-Code:

<form id="my-form" 
   action="index.html"
   method="get"
   onsubmit="return showValue();">
    <input type="text" name="username">
    <input type="text" name="full-name">
    <input type="password" name="password">
    <button type="button" onclick="showValue();">Show value</button>
</form>

Javascript-Code:

function showValue() {
    const myForm = document.forms.my-form;
    console.log(myForm?.username.value);
    return 1;
}

Die document.forms.x hat eine Eigenschaft "value" und das entfernt Warnungen sowohl in der Typescript-Datei als auch im resultierenden JavaScript.

1voto

Juan Pablo Punkte 19

Das funktioniert bei mir:

let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value

0voto

JaMondo Punkte 258

Wenn Sie eine dynamische Element-ID haben, der Sie einen dynamischen Wert zuweisen müssen, können Sie dies verwenden:

//element_id = you dynamic id.
//dynamic_val = you dynamic value.
let _el = document.getElementById(element_id);
_el.value = dynamic_val.toString();

Das funktioniert bei mir.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X