单击按钮时显示文本输入值

Question

我对 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> 中的文本。但它不按我想要的方式工作。我做错了什么？

抱歉我的英语不好。

Answer 1

在您的设置中，myName 仅被评估一次（空字符串）。每次执行addName点击动作都需要抓取值：

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

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

Answer 2

JS :

<script>

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

</script>

Answer 3

所有内容放在一起：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>

旁注：你真的应该努力缩进你的东西。我没有缩进，所以你可以理解你是怎么写的。

Answer 4

解决方法：

        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.

单击按钮时显示文本输入值

Show text input value when click on a button

javascript

jquery

function