使用jquery在单击时更改标题文本

I'm currently attempting to get my Javascript code to mesh with HTML written by someone else. The goal is to get the header to change by using jquery by typing it into a text input box and then clicking on a button.

我目前正在尝试将我的Javascript代码与其他人编写的HTML进行网格划分。目标是通过在文本输入框中键入jquery然后单击按钮来使用jquery来更改标题。

Not exactly sure why it isn't working. In my mind it seems as if it should be functioning properly. If someone could help find a correct solution and explain to me why mine isn't working it would be much appreciated.

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

(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)
                                  })

3 个解决方案

#1

See this. (I hope you have the correct html, make sure to have all the quotes and doublequotes wrapped around every attribute properly.)

看到这个。 (我希望你有正确的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);

});

#2

The value must be extracted inside the click.

必须在单击内提取该值。

So the Javascript code becomes:

所以Javascript代码变成:

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

See the fiddle:

看小提琴:

#3

Here is the working example for you.

以下是适合您的工作示例。

$( "#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>

#1