В event.target.value не вставляется пользовательский ввод в переменную - PullRequest
Новая
       5

В event.target.value не вставляется пользовательский ввод в переменную

0 голосов
/ 03 ноября 2018

У меня есть html-форма, и я хотел бы использовать EventListener при каждом нажатии кнопки отправки и вставлять текстовую область и текстовый ввод в предупреждение.

функция event.target.value у меня не работает, а для ввода пользователя не задана переменная.

почему Eventa.target.value не работает? и как я могу использовать userinput?

Код: 

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;
}
<form action="" id="myform">
  <input type="text" id="myinput" />
  <br/>
  <textarea id="mytext" cols="30" rows="10"></textarea>
  <input type="submit" id='submit' />
</form>

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

почему 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 (в зависимости от используемого браузера).

0 голосов
/ 03 ноября 2018

Вы можете использовать приведенный ниже фрагмент кода и помнить, что целью события является то, на что вы ставите событие 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>
...