Question

我有两个textarea，它以空值开头。然后，当我用id“postcrudo”填充第一个textarea时，我希望下一个textarea（id为“posthecho”）获得与第一个相同的值，并且也显示相同的值。像双向绑定一样，如AngularJS，但仅限于JavaScript和jQuery。

这是JS：

<script type="text/javascript">
  $(document).ready(function(){
    $("#submit").click(function(){
      $("#postcrudo").val(function(){
        algo = this;
      });
      postHecho = postCrudo;
      console.log("OK!");
    });
  });
</script>

这就是HTML：

<body>        
  <div style="width:700px;float:left;">
    <p>Post crudo:</p>
    <p><textarea cols="100" maxlength="99999" name="postCrudo" id="postcrudo" rows="60"></textarea></p>
  </div>
  <div style="width:700px;float:left;">
    <p>Post pasado:</p>
    <p><textarea cols="100" maxlength="99999" name="postHecho" id="posthecho" rows="60"></textarea></p>
  </div>
  <div style="clear:both;"></div>
  <p><input type="submit" value="submit" id="submit" /></p>        
</body>

Chrome控制台中的错误是：

未捕获的ReferenceError：未定义postCrudo

Answer 1

您的元素ID postcrudo全部为小写。 postCrudo确实没有定义

此行postHecho = postCrudo;毫无意义，我认为您正在尝试这样做：

$('#posthecho').val($('#postcrudo').val())

Answer 2

没有postCrudo的声明，因此未定义。另外，为什么你想尝试自己这样做而不是使用像AngularJS这样的东西来处理数据绑定。你基本上是在无缘无故地做更多的工作。另外，您必须手动处理双向数据绑定的所有方面。对我来说，有更聪明的方法来做到这一点。

Answer 3

这是你想要的吗？

https://jsfiddle.net/a4nmto6t/1/

只需获取第一个textarea的值，然后将第二个值更改为：

$(document).ready(function(){
    $("#submit").click(function(){
        var postCrudoVal = $("#postcrudo").val();
        $("#posthecho").val(postCrudoVal);
        console.log("OK!");
    });
});

postHecho和postCrudo都没有声明（由你**），即使它们是，将其中一个分配给另一个也不会做你想要的。您必须使用（在本例中）jQuery选择器将第一个textarea的 value分配给第二个textarea的value ，因为它们是引用DOM元素的那些（textareas）。

**默认情况下，将具有id的元素设置为全局“变量”，但不应使用它们;相反，建议您使用DOM API查找元素或使用jQuery（在幕后使用DOM API）。

Answer 4

JavaScript语法区分大小写。

`postHecho = postCrudo;`

应该是：

`postHecho = postcrudo;`

未捕获的ReferenceError：未定义var

4 个答案: