Javascript 使用jQuery使用表单输入数据更新span元素，但不更新它

我有一个h2元素，里面有样式化内容（css），我还有一个span元素叫做highlight。我想通过单击submit按钮上的文本输入来更新它

我（单击）得到的结果是原始文本被清除，然后再次刷新到跨度中，因此仍然显示“John Smith”

//index.html
约翰·史密斯
//app.js
$（函数（）{
让name=$（'#name'）.val（）；
$（'.button btn'）。单击（函数（）{
$（“#突出显示”）。文本（名称）；
});
});

---

这让我感到沮丧，因为我认为我做得对，但显然不是。提前感谢您提供的解决方案。

原因是您在页面加载时获取输入元素的值，而该值为空。您应该从click事件处理程序函数内的输入中获取值：

$（函数（）{
console.log（$（'#name'）.val（）==”）；//true
$（'.button btn'）。单击（函数（e）{
让name=$（'#name'）.val（）；
$（“#突出显示”）。文本（名称）；
e、 preventDefault（）；//阻止提交表单进行演示
});
});

约翰·史密斯
原因是您在页面加载时获取输入元素的值，而该值为空。您应该从click事件处理程序函数内的输入中获取值：


$（函数（）{
console.log（$（'#name'）.val（）==”）；//true
$（'.button btn'）。单击（函数（e）{
让name=$（'#name'）.val（）；
$（“#突出显示”）。文本（名称）；
e、 preventDefault（）；//阻止提交表单进行演示
});
});

约翰·史密斯
谢谢您的帮助。很好！不确定e.preventDefault（）是否正确，但谷歌会这样做吗it@Jones，非常欢迎您，我补充说，为了演示目的，请保持在同一页上，您可以在上面找到更多信息……非常感谢您的帮助。我的功能非常好。谢谢你的帮助。很好！不确定e.preventDefault（）是否正确，但谷歌会这样做吗it@Jones，非常欢迎您，我补充说，为了演示目的，请保持在同一页上，您可以在上面找到更多信息……非常感谢您的帮助。我的功能非常好。
//index.html
<span id="highlight">John Smith</span>
<form action="" class="form-inline">
   <input id="name" type="text" placeholder="Enter name" size="35">
   <input type="submit" value="Submit" class="button-btn">
</form>

//app.js 
$(function(){
    let name = $('#name').val();
    $('.button-btn').click(function(){
        $('#highlight').text(name);
    });
});