Question

在同一屏幕上的div标题中添加输入类型文本的插入。尝试破坏函数将输入转换为变量并使用它来填充div。

<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">

Title: <input type="text" name="title" class="titleInsert">

<input type="submit" value="Submit">

</form>

</div>

<div class="offer_display">

<div class="title" id= title></div>
</div>

</body>

<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});

</script>
</html>

Answer 1

您的代码的另一个问题是，您必须使用“输入”事件而不是“更改”。

查看小提琴上的工作代码：http://jsfiddle.net/z037qv3n/

<body>
   Form <br><br>
   <form name="input" action="javascript:alert(titleValue);">
   Title: <input type="text" name="title" id="titleInsert">
   <input type="submit" value="Submit">
</form>

<div class="title" id="title"></div>
</body>

<script>
var titleValue="";
$('#titleInsert').on("input", function () {
  titleValue=$(this).val();
  $("#title").text(titleValue);
});

</script>
</html>

Answer 2

更改$('div.title').html(titleValue);

的代码

Answer 3

现场演示：JSFIDDLE

你必须在你的头部包含jQuery库，如下所示

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

您的代码中存在很多错误，请参阅以下内容：

首先应该把你的jQuery放在准备好的函数中。

第二个错误，没有这样的身份#titleInsert它是一个类，所以你必须做.titleInsert

第三个错误h3

中没有标记#title

第四个错误，您应该使用.keyup事件代替.change事件

用以下代码替换你的jQuery代码：

<script type="text/javascript">

$(document).ready(function(){

var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});

});

</script>

如何使用html表单将文本添加到div中？

3 个答案: