Show text input value when click on a button

Question

I'm very new to JavaScript. Here is my html page.

<!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>

I want to type something in the textfield and click the submit button to change text in the <p>. But It doesn't work the way I want. What am I doing wrong?

Sorry for my bad English.

You should start using jsfiddle right away. Not only does it provide a convenient sandbox, but allows you to mock up your stack overflow questions in a very shareable way. — erik258, Jan 02 '15 at 21:24
In addition to Dan's suggestion, if you are new I would recommend sticking to vanilla Javascript instead of going straight to jQuery. That way you can make sure your fundamentals are solid. — Seano666, Jan 02 '15 at 21:26
I'm a web designer. I thought learning jQuery is a good way to start. Seems like I'm wrong. Thanks Seano666 for your suggestion. I should start learning vanilla JS first. — Chathura Kudahetti, Jan 02 '15 at 21:36

score 3 · Answer 1 · answered Jan 02 '15 at 21:23

in your setup, myName is only evaluated once (empty string). You need to grab the value each time you perform the addName click action:

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

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

score 1 · Answer 2 · answered Jan 02 '15 at 21:31

1

Everything put together: 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 note: you should really work on indenting your stuff. I left it without indentation so you could understand it how you wrote it.

answered Jan 02 '15 at 21:31

Brian Moreno

977
4
11
39

While you're at it, why not move the jQuery script tag to within the document head? – Jeromy French Jan 02 '15 at 21:33
1

He wrote it like that, I don't want to throw him off by moving lots of stuff around. Besides in most cases it's better to include jquery and other javascript right before the `
`. See this question: [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)
– Brian Moreno Jan 02 '15 at 21:38
ExoSkeleton321, I'm new to Stack Overflow as well. I still don't have a good idea about how to write a code properly in Stack Overflow. – Chathura Kudahetti Jan 02 '15 at 21:43

score 1 · Accepted Answer · edited Jan 02 '15 at 22:04

The Solution:

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

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

Your Mistakes

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.

score 0 · Answer 4 · answered Jan 02 '15 at 21:27

0

JS :

<script>

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

</script>

answered Jan 02 '15 at 21:27

mcan

7
2

Show text input value when click on a button

4 Answers4