Javascript не выводит значения из поля ввода

-6

Я хочу, чтобы пользователь нажал кнопку отправки, чтобы их имя и возраст отображались в поле ввода с name="output"?Javascript не выводит значения из поля ввода

У меня есть 3 поля ввода, один запрашивает имя, а другой - возраст, а другой - вывод. Я пытаюсь использовать функцию output() для отображения последнего окна ввода.

Я смущен о том, где я ошибаюсь, мне нужен .value?

<!doctype html> 
<html> 
<head> 

<style> 
.formdiv{ 
    align: center; 
} 
</style> 
</head> 
<body> 

<script language="javascript" type="text/javascript"> 
    function output(){ 
     var name = getElementByName('firstName'); 
     var Age= getElementByName('age'); 
     var out = document.write(name+Age); 
     document.getElementByName('output') = out; 
    } 
</script> 

<h1><strong><em><center>Payment Details</center></em></strong> </h1> 
<div class="formdiv"> 
<fieldset><center> 
<legend> Enter the following Info:</legend> 
<br /> 
<label> Name </label> 
<input type="text" name="firstName" placeholder="John" required="required"></input> 
<br/> 
<br/> 
<label>Age </label> 
<input type="number" name="age" maxlength="2" required="required"></input> 
</fieldset> 
</center> 
</div> 
<div> 
<center> 
     <button onClick="output()">Submit</button><br/> 
<label for="output">Output</label> 
<br/> 
<input type="textbox" name="output"></input> 
</center> 
</div> 
</body> 
</html>

источник

2017-01-18 Kevin Farrell

Что' getElementByName() '? – Pointy

Я хочу использовать атрибут name для захвата того, что вводил пользователь, чтобы использовать имя пользователя «firstName». –

Вот фиксированный код: https://jsfiddle.net/sa71h00b/ (Это слишком рано для * way * вы должны публиковать на SO. Вам нужно сделать много * больше исследований в первую очередь. Возьмите бесплатный курс JavaScript. Я рекомендую codecademy.) –

Есть целый несколько вещей неправильно с вашим кодом:

нет такого понятия, как getElementByName - это getElementById
изменения к вышесказанному, вам нужно добавить идентификаторы для ваших входных элементов
Вы должны использовать value возвращенный объект от getElementById
выше получит ваш код работает, но кроме того, center тег является устаревшим, и вы не должны использовать его
Входов закрывающихся тегов поэтому вы надеваете «т нужно </input>

<!doctype html> 
 
<html> 
 

 
<head> 
 

 
    <style> 
 
    .formdiv { 
 
     align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <script language="javascript" type="text/javascript"> 
 
    function output() { 
 
     var name = document.getElementById('firstName').value; 
 
     var Age = document.getElementById('age').value; 
 
     var out = name + Age; 
 
     document.getElementById('output').value = out; 
 
    } 
 
    </script> 
 

 
    <h1><strong><em><center>Payment Details</center></em></strong> </h1> 
 
    <div class="formdiv"> 
 
    <fieldset> 
 
     <center> 
 
     <legend>Enter the following Info:</legend> 
 
     <br /> 
 
     <label>Name</label> 
 
     <input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input> 
 
     <br/> 
 
     <br/> 
 
     <label>Age</label> 
 
     <input type="number" name="age" id="age" maxlength="2" required="required"></input> 
 
    </fieldset> 
 
    </center> 
 
    </div> 
 
    <div> 
 
    <center> 
 
     <button onClick="output()">Submit</button> 
 
     <br/> 
 
     <label for="output">Output</label> 
 
     <br/> 
 
     <input type="textbox" name="output" id="output"></input> 
 
    </center> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-01-18 15:52:40 Pete

Вот рабочая версия вашего кода.

Там нет методы getElementByName (но getElementsByName) - вы должны использовать document.getElementById() (Read about it here)
Вы должны использовать value входной элемент.

<!doctype html> 
 
<html> 
 
<head> 
 

 
<style> 
 
.formdiv{ 
 
    align: center; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<script language="javascript" type="text/javascript"> 
 
    function output(){ 
 
     var name = document.getElementById('firstName').value; 
 
     var Age= document.getElementById('age').value; 
 
     document.getElementById('output').value = name+Age; 
 
    } 
 
</script> 
 

 
<h1><strong><em><center>Payment Details</center></em></strong> </h1> 
 
<div class="formdiv"> 
 
<fieldset><center> 
 
<legend> Enter the following Info:</legend> 
 
<br /> 
 
<label> Name </label> 
 
<input type="text" id="firstName" placeholder="John" required="required"></input> 
 
<br/> 
 
<br/> 
 
<label>Age </label> 
 
<input type="number" id="age" maxlength="2" required="required"></input> 
 
</fieldset> 
 
</center> 
 
</div> 
 
<div> 
 
<center> 
 
     <button onClick="output()">Submit</button><br/> 
 
<label for="output">Output</label> 
 
<br/> 
 
<input type="textbox" id="output"></input> 
 
</center> 
 
</div> 
 
</body> 
 
</html>

источник

2017-01-18 15:46:27

getElementsByName (примечание: Elements, не Element) возвращает список Element с, в этом случае ваши <input> с. Поэтому, прежде всего, вам нужно выбрать первый (в вашем случае ваш единственный), используя getElementsByName(...)[0]. Затем вы получите один Element.

Однако вы не хотите выводить весь элемент (который является Object, а не String и преобразован в строку, скорее всего, не будет того, что вы ожидаете), поэтому вам нужно выбрать значение свойства этого Element. Так что да, вам нужно добавить .value, так же, как вы предположить:

function output(){ 
    var name = getElementsByName('firstName')[0].value; 
    var Age= getElementsByName('age')[0].value;

Затем document.write записывает аргумент в новый документ непосредственно, что приводит к странице с пуста ничего на ней, но эту строку. Это не то, что вы хотите, поэтому вам это не нужно. Все, что вы сделать хотите, чтобы назначить новую переменную с именем out с этой строки:

var out = name+Age;

Затем назначая новое значение в поле вывода - вы не хотите, чтобы заменить Element строкой (т.е. даже не работать), но это значение, так что вам опять потребуется .value:

document.getElementsByName('output')[0].value = out; 
}

это должно сделать трюк.

(В дополнение к этому, вы можете захотеть использовать name + " " + Age вместо просто name+Age, так как в противном случае вы в конечном итоге с «Джон Doe23» вместо «John Doe 23», который вы, вероятно, хотите)

источник

2017-01-18 15:47:37

Javascript не выводит значения из поля ввода

ответ

Смежные вопросы