不能得到輸入離子值3

Question

我有簡單的輸入

<input type="number" maxlength=1 id="1"/> 

和簡單的JS在我的.ts文件

console.log(document.getElementById("1").value); 

，但我得到一個錯誤

Property 'value' does not exist on type 'HTMLElement' 

Answer 1

那麼首先你應該避免直接角，隨後在離子，這是不好的性能，使你的代碼少維護訪問DOM的。

相反，你添加一個ngModel您輸入元素：

<ion-input [(ngModel)]="myInput"></ion-input> 

和實例變量添加到您的.ts文件：

public myInput; 

你ngModel變量將有你的輸入字段的值。您可以通過例如添加ionChange事件偵聽器添加到輸入的更改記錄到它：

<ion-input [(ngModel)]="myInput" (ionInput)="logChange($event)"></ion-input> 

而在你.ts文件中添加的方法吧：

logChange(event) { 
    console.log(event); 
} 

Answer 2

您需要投射到HTMLInputElement（HtmlInputElement）。這是因爲常規HTMLElements沒有值屬性。

console.log(<HTMLInputElement>document.getElementById("1").value); 

P.S.鑑於您使用的是Ionic 3，我假設您也使用Angular，並且有更好的方法來抓取dom元素，例如ViewChild。

Answer 3

由於您沒有給出value屬性輸入number，您將得到未定義的屬性。

要麼在元素中定義屬性，要麼在事件發生時將其提取出來。

<input type="number" maxlength=1 id="1" /> 
 

 
<button onclick="bclick()">Click</button> 
 

 
<script> 
 

 
function bclick(){ 
 
    console.log(document.getElementById("1").value); 
 
} 
 
</script>