Question

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

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

(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

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

必须在click内提取该值。

因此Javascript代码变为：

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

See the fiddle:

Answer 3

以下是您的工作示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: