Thuộc tính 'giá trị' không tồn tại trên giá trị của loại 'HTMLEuity'


233

Tôi đang chơi xung quanh với bản thảo và đang cố gắng tạo một tập lệnh sẽ cập nhật phần tử p khi văn bản được nhập vào hộp nhập.

Các html trông như sau:

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

greeter.tstập tin:

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

Khi tôi biên dịch với tsctôi nhận được "lỗi" sau:

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

Tuy nhiên, trình biên dịch không xuất ra tệp javascript, chỉ hoạt động tốt trong chrome.

Làm thế nào tôi nhận được lỗi này? Và làm thế nào tôi có thể sửa chữa nó?

Ngoài ra, tôi có thể tra cứu thuộc tính nào hợp lệ trên 'HTMLElement'bản in?

Xin lưu ý rằng tôi rất mới với javascript và typcript, vì vậy tôi có thể thiếu một cái gì đó rõ ràng. :)

Câu trả lời:


446

Dựa trên câu trả lời của Tomasz Nurkiewiczs, "vấn đề" là bản thảo là loại an toàn. :) Vì vậy, document.getElementById()trả về loại HTMLElementkhông chứa valuetài sản. Các kiểu HTMLInputElementcon tuy nhiên có chứa valuetài sản.

Vì vậy, một giải pháp là bỏ kết quả getElementById()để HTMLInputElementthích điều này:

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

<>là toán tử đúc trong bản thảo. Xem câu hỏi TypeScript: truyền HTMLEuity .

Các javascript kết quả từ dòng trên trông như thế này:

inputValue = (document.getElementById(elementId)).value;

tức là không chứa thông tin loại.


Bạn có danh sách phần tử html nào thuộc loại nào cho bản thảo không? Nếu có thì xin vui lòng gửi nó sẽ hữu ích cho ai đó !! cảm ơn vì câu trả lời tuyệt vời
Pardeep Jain

1
Khắc phục sự cố này phá vỡ hoàn toàn mã của tôi; nói bất cứ điều gì đến tiếp theo "không phải là một chức năng". Tôi không hiểu lý do đằng sau cách TS xử lý việc này; vì getEuityById có thể trả về bất kỳ loại phần tử nào, nên mọi thứ đều được chấp nhận theo mặc định.
Rùa dễ thương

@TurtlesAreCute Tôi tò mò về cách giải pháp này đã phá vỡ mã của bạn. Hy vọng một năm sau bạn đã tìm thấy giải pháp, nhưng việc truyền sang HTMLInputEuity sẽ có hiệu quả.
Michaël Polla

Trong trường hợp của tôi, tôi đã phải thay đổi nó thành HTMLAnchorEuity.
Wildhammer

@Wildhammer Bởi vì phần tử của bạn không phải là phần tử Input! OP là.
Auspex

68

Nếu bạn đang sử dụng phản ứng, bạn có thể sử dụng astoán tử.

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

3
Vì một số lý do, câu trả lời được chấp nhận ở đây đã gây ra lỗi sau cho tôi: Phần tử JSX 'HTMLInputEuity' không có thẻ đóng tương ứng. Đây là câu trả lời làm việc cho tôi.
NigelTufnel

1
Lý do là vì trong các tệp tsx bạn không thể sử dụng các <>toán tử để truyền, vì chúng được sử dụng trong React. Vì vậy, bạn phải sử dụng như: basarat.gitbooks.io/typescript/docs/types/iêu
Powderham

Mặc dù điều này không làm việc cho tôi, nhưng nó đã hướng tôi đi đúng hướng :) lên bình chọn !!!
Simon Giá

40

Hãy thử truyền phần tử bạn muốn cập nhật lên HTMLInputEuity. Như đã nêu trong các câu trả lời khác, bạn cần gợi ý cho trình biên dịch rằng đây là một loại HTMLEuity cụ thể:

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);


17

Cách khắc phục nhanh cho việc này là sử dụng [] để chọn thuộc tính.

function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

Tôi chỉ thử một vài phương pháp và tìm ra giải pháp này,
tôi không biết vấn đề đằng sau kịch bản gốc của bạn là gì.

Để tham khảo, bạn có thể tham khảo bài viết của Tomasz Nurkiewicz.


Trả lời đúng cho câu hỏi, đã giúp tôi rất nhiều.
Monir Khan

15

Vấn đề là ở đây:

document.getElementById(elementId).value

Bạn biết rằng HTMLElementtrả về getElementById()thực sự là một trường hợp HTMLInputElementthừa kế từ nó bởi vì bạn đang truyền ID của phần tử đầu vào. Tương tự như vậy trong Java được gõ tĩnh, điều này sẽ không biên dịch:

public Object foo() {
  return 42;
}

foo().signum();

signum()là một phương pháp Integer, nhưng trình biên dịch chỉ biết loại tĩnh của foo(), đó là Object. Và Objectkhông có một signum()phương pháp.

Nhưng trình biên dịch không thể biết rằng, nó chỉ có thể dựa trên các kiểu tĩnh, không phải là hành vi động của mã của bạn. Và theo như trình biên dịch biết, loại document.getElementById(elementId)biểu thức không có thuộc valuetính. Chỉ các yếu tố đầu vào có giá trị.

Để kiểm tra tham chiếu HTMLElementHTMLInputElementtrong MDN. Tôi đoán Typecript ít nhiều phù hợp với những điều này.


Nhưng tôi không truy cập .valuevào phần tử p, tôi đang truy cập vào inputphần tử. Hay là tôi nhầm?
Bjarke Freund-Hansen

1
@bjarkef: bạn đang gọi document.getElementById("greet")và bạn có <p id="greet"></p>...
Tomasz Nurkiewicz

Tôi đang gọi document.getElementById("greet").innerTextđó là hoàn toàn hợp lệ, tôi chỉ truy cập thuộc valuetính trên phần tử đầu vào tại dòng chứa: var inputValue = document.getElementById(elementId).value;in greet(elementId)và được gọi trong html onkeyup="greet('name')"ở dạng đầu vào. Vì vậy, tôi nghĩ rằng bạn đang đọc sai mã, xin vui lòng sửa cho tôi nếu tôi sai. :)
Bjarke Freund-Hansen

@bjarkef: xin lỗi, bạn đã đúng. Tôi đã viết lại câu trả lời của tôi, có một cái nhìn!
Tomasz Nurkiewicz

1
Ah, điều này có ý nghĩa. Vì vậy, tôi nên bỏ giá trị được trả về getElementByIdvà làm thế nào để tôi làm điều đó trong bản in? Hoặc có một phương pháp khác hơn getElementByIdlà trả về HTMLInputElement?
Bjarke Freund-Hansen

11

Ngoài ra, đối với bất kỳ ai sử dụng các thuộc tính như Đạo cụ hoặc Tham chiếu mà không có "Tài liệu" của bạn thì bạn có thể:

("" as HTMLInputElement).value;

Trong đó các trích dẫn ngược là giá trị đạo cụ của bạn để một ví dụ sẽ như vậy:

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);

4

Nếu bạn đang sử dụng góc, bạn có thể sử dụng -

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

1

Công việc này đối với tôi:

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

Cần định dạng
Standin.Wolf

-1

Vấn đề:

lỗi 'văn bản' thuộc tính không tồn tại trên loại 'HTMLEuity'

Giải pháp: trong nguyên cảo chúng ta cần phải cast document.getElementById()mà trả về kiểu HTMLElementtrong< HTMLScriptElement >

Vì vậy, chúng tôi có thể làm điều đó bằng cách làm theo cách khắc phục lỗi như mong đợi của typecript.js

Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;

Nó làm việc cho tôi .. hy vọng nó cũng làm việc cho bạn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.