不能得到输入离子值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>