使用 jquery 更改 Header 单击时的文本

Question

我目前正在尝试让我的 Javascript 代码与其他人编写的 HTML 相匹配。目标是通过使用 jquery 将 header 键入文本输入框然后单击按钮来更改。

不确定为什么它不起作用。在我看来，它似乎应该正常运行。如果有人可以帮助找到正确的解决方案并向我解释为什么我的方法不起作用，我们将不胜感激。

(HTML shortened)
<tr> <td colspan=2 align=right> Title:<input type=text id=newTitle value="Picture Title"> </td> <td> <button id=genTitle>Change Title</button> </td> </tr>

<h2 id=artTitle align=center>Picture Title</h2>

(javascript)
var newTitle = $('#newTitle').val();
$( "#genTitle" ).click(function() {
    $( "#artTitle" ).text(newTitle)
                                  })

Answer 1

必须在 click 内提取值。

因此 Javascript 代码变为：

$( "#genTitle" ).click(function() {
    var newTitle = $('#newTitle').val();
    $( "#artTitle" ).text(newTitle)
})

See the fiddle:

Answer 2

看到这个。（我希望你有正确的 html，确保所有的引号和双引号都正确地包含在每个属性周围。）

// Set a event on button click
$("#genTitle").click(function(){

    // Fetch Input Value
    var val = $("#newTitle").val();

    // Set the value fetched as the html of header
    $("#artTitle").html(val);

});

Answer 3

这是适合您的工作示例。

$( "#genTitle" ).click(function() {
    var newTitle = $('#newTitle').val();
    $( "#artTitle" ).text(newTitle)
                                  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr> 
    <td colspan=2 align=right> Title: <input type=text id="newTitle" value="Picture Title">     </td>     
    <td> <button id="genTitle">Change Title</button> </td> 
</tr>

<h2 id="artTitle" align="center">Picture Title</h2>

使用 jquery 更改 Header 单击时的文本

Using jquery to change Header Text on click

javascript

jquery

input

click