булево не функция в JavaScript

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

Похоже, что onclick не работает.

Поскольку вы уже используете jQuery, я бы предложил использовать событие click вместо onclick в HTML. Это лучшая практика, чтобы сделать это ...

попробовать что-то вроде этого:

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

И просто ваш HTML к этому:

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

Answer 2

Проблема заключается в том, что вы определяете свой translate() функции внутри функции document.ready(). Эти определения функций являются локальными для этой области, к ним нельзя получить доступ с onclick.

Вам не нужно указывать определения функций внутри обработчика ready, вам нужны только операторы, которые немедленно получают доступ к DOM. Определите его на уровне, и он должен работать.

Или, как предложил c0deNinja, используйте jQuery для привязки обработчика. Если вы сделаете это внутри обработчика ready, он может вызывать другие функции, определенные там.

Answer 3

кажется, что в хроме все элементы имеют логическое свойство translate, (например, console.log(document.body.translate) будет отображать true в хроме, не знаю, почему.

Когда вы onclick="translate();" тогда он просто называет его локальной области видимости объекта DOM (теперь почему он не назвал его на объект окна другой вопрос)

например, если вы измените translate на translate2 он должен работать, так как странно, как это звучит