Показать значение ввода текста при нажатии на кнопку

Я - очень новичок в JavaScript. Вот моя html-страница.Показать значение ввода текста при нажатии на кнопку

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<header> 
    <h1>This is my site!</h1> 
</header> 
<section> 
    <h2>My site content</h2> 
    <input type="text" id="name"> 
    <button id="addName">Submit</button> 
    <hr> 
    <p>name</p> 
</section> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
    var myName = $("#name").val(); 

    $("#addName").click(showName(myName)); 

    function showName(value) { 
     $("p").html(value); 
    }; 


</script> 
</body> 
</html>

Я хочу, чтобы напечатать что-нибудь в текстовое поле и нажмите на кнопку отправить, чтобы изменить текст в <p>. Но это не работает так, как я хочу. Что я делаю не так?

Извините за мой плохой английский.

источник

2015-01-02 Chathura Kudahetti

Вы должны начать использовать jsfiddle сразу. Он не только предоставляет удобную песочницу, но и позволяет вам макетировать ваши проблемы с переполнением стека очень широко. –

В дополнение к предложению Дэна, если вы новичок, я бы рекомендовал придерживаться ванильного Javascript вместо того, чтобы идти прямо в jQuery. Таким образом, вы можете убедиться в том, что ваши основы прочны. – Seano666

Это мой первый в переполнении стека. Спасибо Dan за подсказку. –

Решение:

 function showName() {     
      var myName = $("#name").val();     
      $("p").html(myName); 
     } 

     $("#addName").click(function() { 
      showName(); 
     });

Ваши ошибки

var myName = $("#name").val(); //myName will get blank value. Its doesn't matter you click or not.. it will be always blank. 

$("#addName").click(showName(myName)); // Not a proper syntax to run a function after click. 

function showName(value) {$("p").html(value);} //Your function will run without click. Because you mentioned this 'Run' function in click syntax directly.

источник

2015-01-02 21:39:42

В вашей настройке myName оценивается только один раз (пустая строка). Вы должны захватить значение каждый раз, когда вы выполняете действие addName Клик:

$("#addName").click(function(event) { 
    showName($("#name").val()); 
}); 

function showName(value) { 
    $("p").html(value); 
};

источник

2015-01-02 21:23:20 dfperry

JS:

<script> 

    $("#addName").click(function(){ 
     var myName = $("#name").val(); 
     $("p").html(myName); 
    }); 

</script>

источник

2015-01-02 21:27:25 mcan

Все вместе взятые: http://jsfiddle.net/5fqauk6L/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<header> 
    <h1>This is my site!</h1> 
</header> 
<section> 
    <h2>My site content</h2> 
    <input type="text" id="nameInput"> 
    <button id="addName">Submit</button> 
    <hr> 
    <p id="name">name</p> 
</section> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
    $("#addName").click(function(){ 
     var myName = $("#nameInput").val(); 
     $("#name").html(myName); 
    }); 
</script> 
</body> 
</html>

Side Примечание: вы должны действительно работайте над отступом своих вещей. Я оставил его без отступов, чтобы вы могли понять, как вы его написали.

источник

2015-01-02 21:31:20

В то время как вы на это, почему бы не переместить тег сценария jQuery внутри заголовка документа? –

Он написал это так, я не хочу его бросать, перемещая много вещей вокруг. Кроме того, в большинстве случаев лучше включить jquery и другой javascript прямо перед ''. См. Этот вопрос: [http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer](http://stackoverflow.com/questions/2105327/should-jquery- code-go-in-header-or-footer) –

ExoSkeleton321, я новичок в переполнении стека. У меня все еще нет хорошей идеи о том, как правильно писать код в Stack Overflow. –

Показать значение ввода текста при нажатии на кнопку

ответ

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