Question

我有一个html表单，并且每次单击“提交”按钮时都想使用事件监听器，并将textarea和textinput插入警报中。

event.target.value的功能对我不起作用，并且用户输入未设置为变量。

为什么eventa.target.value不起作用？以及如何使用用户输入？

代码：

var myinput = document.getElementById('myinput');
var mytext = document.getElementById('mytext').target.value;
var myform = document.getElementById('myform');

myform.addEventListener("change", function(event) {
  alert(mytext);
})

myform.addEventListener("click", function(event) {
  alert(mytext);
})

input[type="text"] {
  width: 200px;
  height: 20px;
}

input[type="submit"] {
  width: 100px;
  height: 50px;
}

Answer 1

您可以使用下面的代码段，并记住事件的目标是放置click事件的对象。因此目标将是您不需要的提交按钮。 target.value也只能在目标上运行，而不能在DOM中的任何其他元素上运行

    const myinput = document.getElementById('myinput');
    const mytext = document.getElementById('mytext');
    const submitButton = document.getElementById('submit');

    submitButton.addEventListener("click", function(event){
       const textInput = myinput.value;
       const textArea = mytext.value;
       alert(`the text Input: '${textInput}' and the text Area: '${textArea}'`);
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
input[type="text"] { 
  width: 200px;
  height: 20px;
}

input[type="submit"] { 
  width: 100px;
  height: 50px;
}

    </style>
</head>
<body>
        <form action="" id="myform">
                <input type="text" id="myinput"/>
                <br/>
                <textarea id="mytext" cols="30" rows="10"></textarea>
                <input type="submit" id='submit' />
              </form>
</body>
<script src="script.js"></script>
</html>

Answer 2

为什么eventa.target.value不起作用？

因为您没有使用Event.target.value。您正在尝试使用HTMLElement.target.value当然是undefined的原因，因为HTMLElement没有target属性。但是，对于HTMLInputElement和HTMLTextareaElement，它们确实具有value属性，您可以在事件监听器中读取该属性：

var myinput = document.getElementById('myinput');
var mytext = document.getElementById('mytext');
var myform = document.getElementById('myform');

myform.addEventListener("change", function(event) {
  console.log(mytext.value);
  console.log(myinput.value);
})

myform.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log(mytext.value);
  console.log(myinput.value);
})

input[type="text"] {
  width: 200px;
  height: 20px;
}

input[type="submit"] {
  width: 100px;
  height: 50px;
}

<form action="" id="myform">
  <input type="text" id="myinput" />
  <br/>
  <textarea id="mytext" cols="30" rows="10"></textarea>
  <input type="submit" id='submit' />
</form>

请注意，change事件仅在输入元素发出blur事件时才发生（取决于您使用的浏览器）。

event.target.value未将用户输入插入变量

2 个答案: