如何获取输入文本值并传入按钮onclick方法在javascript函数中传递值

时间:2018-01-18 09:45:41

标签: javascript html

import { Component, VERSION, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="loginForm" (submit)="submit($event)">
      <div>
        <label>login</label>
        <input formControllName="login" type="text">
      </div>

      <div>
        <label>password</label>
        <input formControllName="password" type="text">
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <p>{{ loginForm.value | json }}</p>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this._fb.group({
      login: [""],
      password: [""]
    })
  }

  submit(e) {
    e.preventDefault()
    console.log(this.loginForm.value)
  }
}
function addData (n1, n2) {
    alert(fn+ln);
}

它给我以下错误:

  

ReferenceError:未定义n1。

3 个答案:

答案 0 :(得分:1)

使用n1.value无法获取输入的值您需要使用document.getElementById获取DOM元素并使用其值获取字符串值并将其解析为Integer之前你添加它们。

见:

function addData (n1, n2) {
    n1Val = parseInt(n1.value);
    n2Val = parseInt(n2.value);
    alert(n1Val+n2Val);
}
<body>
    <input Type="text" id="n1">
    <input Type="text" id="n2">
    <button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button> 
</body>

如果您只想连接数据而不添加数据,只需删除parseInt调用并添加字符串,如下例所示:

function addData (n1, n2) {
	n1Val = n1.value;
    n2Val = n2.value;
    alert(n1Val+n2Val);
}
<body>
    <input Type="text" id="n1">
    <input Type="text" id="n2">
    <button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>  
</body>

希望它有所帮助!!

答案 1 :(得分:0)

&#13;
&#13;
<html>
    <head>
        <title>Input tutorial</title>
        <script language="javascript">
            function addNumbers()
            {
                var val1 = parseInt(document.getElementById("value1").value);
                var val2 = parseInt(document.getElementById("value2").value);
                var ansD = document.getElementById("answer");
                var final = val1 + val2;
                alert(final);
            }
        </script>
    </head>
     
    <body>
        value1 = <input type="text" id="value1" name="value1" value="1" /> value2 = <input type="text" id="value2" name="value2" value="2" />
        <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()" /> 
    </body> 

</html>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这样做:

function addData (e) {
var rec = 0;
var t = document.getElementsByTagName('input');
for(var i=0;i<t.length;i++){
rec=rec+parseInt(t[i].value);
}
console.log(rec);
}
<script>
   
</script>

<body>
    <input Type="text" name="n1">
    <input Type="text" name="n2">
    <button onClick="addData(this)">click</button> 
</body>