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

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

javascript jquery function

Javascript 单击按钮时显示文本输入值,javascript,jquery,function,Javascript,Jquery,Function,我对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&

我对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>


文件
这是我的网站！
我的网站内容
提交

名字
var myName=$（“#name”）.val（）；
$（“#addName”）。单击（showName（myName））；
函数showName（值）{
$（“p”）.html（值）；
};

我想在文本字段中键入一些内容，然后单击提交按钮更改

中的文本。但这不是我想要的方式。我做错了什么

对不起，我的英语不好。

在您的设置中，myName只计算一次（空字符串）。每次执行addName单击操作时，都需要获取该值：

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

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

在您的设置中，myName只计算一次（空字符串）。每次执行addName单击操作时，都需要获取该值：

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

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

JS:


$（“#addName”）。单击（函数（）{
var myName=$（“#name”）.val（）；
$（“p”）.html（myName）；
});

JS:

<script>

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

</script>


$（“#addName”）。单击（函数（）{
var myName=$（“#name”）.val（）；
$（“p”）.html（myName）；
});

所有东西放在一起：


文件
这是我的网站！
我的网站内容
提交

名称
$（“#addName”）。单击（函数（）{
var myName=$（“#名称输入”）.val（）；
$（“#name”）.html（myName）；
});

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

所有的东西放在一起：


文件
这是我的网站！
我的网站内容
提交

名称
$（“#addName”）。单击（函数（）{
var myName=$（“#名称输入”）.val（）；
$（“#name”）.html（myName）；
});

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

解决方案：

        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.

解决方案：

        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.

您应该立即开始使用JSFIDLE。它不仅提供了一个方便的沙盒，还允许您以一种非常可共享的方式模拟堆栈溢出问题。除了Dan的建议之外，如果您是新手，我建议您坚持使用香草Javascript，而不是直接使用jQuery。这样你就可以确保你的基础是坚实的。这是我第一次在堆栈溢出。谢谢丹的提示。我是一名网页设计师。我认为学习jQuery是一个很好的开始。看来我错了。谢谢你的建议。我应该先开始学习vanilla JS。你应该马上开始使用JSFIDLE。它不仅提供了一个方便的沙盒，还允许您以一种非常可共享的方式模拟堆栈溢出问题。除了Dan的建议之外，如果您是新手，我建议您坚持使用香草Javascript，而不是直接使用jQuery。这样你就可以确保你的基础是坚实的。这是我第一次在堆栈溢出。谢谢丹的提示。我是一名网页设计师。我认为学习jQuery是一个很好的开始。看来我错了。谢谢你的建议。我应该先开始学习vanilla JS。既然你这么做了，为什么不把jQuery脚本标记移到文档头中呢？他就是这样写的，我不想让他到处乱动。此外，在大多数情况下，最好在

之前包含jquery和其他javascript。请看这个问题：ExoSkeleton321，我也不熟悉堆栈溢出。我仍然不知道如何在堆栈溢出中正确地编写代码。既然这样，为什么不将jQuery脚本标记移动到文档头中呢？他就是这样写的，我不想因为移动了很多东西而抛弃他。此外，在大多数情况下，最好在

之前包含jquery和其他javascript。请看这个问题：ExoSkeleton321，我也不熟悉堆栈溢出。我仍然不知道如何在堆栈溢出中正确地编写代码。