3

我有以下 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>
4

3 回答 3

7

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

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

例如，如果您更改translate为translate2它应该可以工作，听起来很奇怪

于 2013-04-16T20:04:15.737 回答
4

好像onclick是不工作。

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

尝试这样的事情：

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

并且只是你的 HTML 到这个：

<input id="translateButton" type="button" value="Translate" />
于 2013-04-16T19:42:34.997 回答
1

问题是你在translate()函数内部定义你的document.ready()函数。这些函数定义在该范围内是本地的，不能从onclick.

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

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

于 2013-04-16T19:54:14.870 回答