Question

我有以下javascript，我正在阅读一个单词并撰写翻译，但我一直收到错误boolean is not a function

function translate() {
var word = $("#prodId").val();

$.getJSON("api/translation?word=" + word,
            function (data) {

                $("#word").text(data.TranslatedWord);
            })
            .fail(
                function (jqXHR, textStatus, err) {
                    $("#word").text('Error: ' + err);
                });
                    }

以下方法基本相同，但使用整数可以正常工作：

function find() {
       var id = $("#prodId").val();
       $.getJSON("api/products/" + id,
            function (data) {
                var str = data.Name + ': $' + data.Price;
                $("#product").text(str);
            })
            .fail(
                function (jqXHR, textStatus, err) {
                    $("#product").text('Error: ' + err);
                });
                    }

以下是HTML的摘录：

<div id="body">
    <div class="main-content">
        <div>
            <h1>All Products</h1>
            <ul id="products" />
        </div>
        <div>
        <label for="prodId">ID:</label>
        <input type="text" id="prodId" />
        <input type="button" value="Translate" onclick="translate();" />
        <p id="word" />
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    // Send an AJAX request
    $.getJSON("api/products/",
              function (data) {
                  // On success, 'data' contains a list of products.
                  $.each(data, function (key, val) {

                      // Format the text to display.
                      var str = val.Name + ': $' + val.Price;

                      // Add a list item for the product.
                      $('<li/>', { text: str })
                      .appendTo($('#products'));

                  });

              });

});

    function find() {
        var id = $("#prodId").val();
        $.getJSON("api/products/" + id,
                  function (data) {
                      var str = data.Name + ': $' + data.Price;
                      $("#product").text(str);
                  })
        .fail(
            function (jqXHR, textStatus, err) {
                $("#product").text('Error: ' + err);
            });
    }

    function translate() {
        var word = $("#prodId").val();

        $.getJSON("api/translation?word=" + word,
                  function (data) {

                      $("#word").text(data.TranslatedWord);
                  })
        .fail(
            function (jqXHR, textStatus, err) {
                console.log(err);

                $("#word").text('Error: ' + err);
            });
    }




</script>

Answer 1

似乎在chrome中，所有元素都有一个名为translate的布尔属性，（例如console.log(document.body.translate)将在chrome中显示true，不确定原因。

当你执行onclick="translate();"时，它只是在本地DOM对象范围内调用它（现在为什么它不在窗口对象上调用它是另一个问题）

e.g。如果您将translate更改为translate2它应该可以正常工作，听起来很奇怪

Answer 2

好像onclick似乎没有效果。

由于您已经在使用jQuery，我建议使用click事件而不是HTML中的onclick。这样做更好......

尝试这样的事情：

$("#translateButton").click(function() {
    translate();
});

只是你的HTML：

<input id="translateButton" type="button" value="Translate" />

Answer 3

问题是您在translate()函数中定义了document.ready()函数。这些函数定义是该范围的本地函数，无法从onclick访问它们。

您不需要将函数定义放在ready处理程序中，您只需要在那里立即访问DOM的语句。在顶层定义它，它应该工作。

或者，正如c0deNinja建议的那样，使用jQuery来绑定处理程序。如果你在ready处理程序中执行此操作，它可以调用其中定义的其他函数。

boolean不是javascript中的函数

3 个答案: