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

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

解决方案：

        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.

Answer 4

JS：

<script>

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

</script>

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

4 个答案: