Отображение ввода обратно пользователю - javascript

Я нашел несколько вопросов с ответами о том, как это сделать, но я думаю, что моя проблема интересная. Я пытаюсь ввести пользователя в свое имя в текстовое поле, а затем, когда они нажали кнопку, он отобразит его обратно.Отображение ввода обратно пользователю - javascript

Это код, у меня есть:

<html> 
<head> 
    <title>Side Bar test</title> 
    <link rel="stylesheet" href="test.css" /> 
</head> 

<body> 
    <div id="sideWrapper"> 
     <p id="wrapper"><label for="name">Name: <input type="text" name="name" id="name"></p> 
     <button onclick="display();">Submit</button> 
     </br> 

     <div id="playerName"> 

     </div> 
    </div> 
</body> 

<script type="text/javascript" language="javascript"> 
    var input = document.getElementById("name").value; 

    function display() { 
     document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>"; 
    } 
</script>

Когда document.getElementById("name").value называется, она принимает только то, что было в текстовом поле, когда страница первый загружен. Попытка обновить его после нажатия кнопки не работает. Итак, если вы наберете «John Doe» в поле, а затем перезагрузите страницу и нажмите кнопку, она отобразит Джона Доу. Но если вы попытаетесь изменить его, это не сработает. Я попытался переместить скрипт на <head>, но это только делает его неопределенным.

Как это сделать, так что функция display() видит, что пользователь вводит в поле и обновляет ее, чтобы распечатать ее на экране?

EDIT: Исправлен код, перемещая входную линию в тело функции.

<script type="text/javascript" language="javascript"> 
    function display() { 
     var input = document.getElementById("name").value; 
     document.getElementById("PlayerName").innerHTML = "<p>Player: " + input + "</p>"; 
    } 
</script>

источник

2016-02-26 WitchKing17

Введите значение 'var input = document.getElementById (" name "). Value;' внутри функции. По сути, этот код выполняет вторую загрузку страницы, задолго до ввода любого ввода. Вы хотите захватить это значение после нажатия кнопки, поэтому поместите его внутри функции. –

ну, я был на ответе, смотрю, как вы отвечаете, см. Эту скрипту https://jsfiddle.net/zcv1awwt/ просто поместите код сценария в тело – Muath

Вы должны положить декларацию input внутри display функции.

function display() { 
    var input = document.getElementById("name").value; 
    document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>"; 
}

Как вы в настоящее время его значение input сохраняется при загрузке страницы, поэтому он не обновляется автоматически.

источник

2016-02-26 21:11:39 Bucket

input = document.getElementById("name").value; должен находиться внутри функции display(), так как вы всегда ставите его в исходное значение (пустое).

источник

2016-02-26 21:12:07

Вы проблема в том, что это: var input = document.getElementById("name").value; стреляет сразу же, когда программа загружается.

Чтобы исправить это, выполните следующие действия:

function display() { 
    var input = document.getElementById("name").value; 
    document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>"; 
}

Таким образом, входная переменная присваивается текущее значение входного элемента каждый раз, когда функция вызывается.

Вот fiddle, чтобы показать, что при задании страницы загружается задание переменной input. Я добавил значение по умолчанию для ввода, чтобы показать, что независимо от того, к чему вы его измените, значение всегда является значением по умолчанию.

источник

2016-02-26 21:12:50 kemiller2002

Отображение ввода обратно пользователю - javascript

ответ

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