boolean is not a function in javascript

Question

I have the following javascript where I am reading in a word and writing out a translation, but I keep getting the error 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);
                });
                    }

The following method which is basically the same thing, but uses an integer works fine:

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);
                });
                    }

Here is a snippet of the 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>

Don't you get some more details via a browsers console, e.g. a line number or backtrace? — feeela, Apr 16 '13 at 19:32
@Philipp - I don't know how to tell, but when I look at the google console, it occurs on the onclick — Xaisoft, Apr 16 '13 at 19:33
@KevinB - I tried putting that in the function, but nothing shows. — Xaisoft, Apr 16 '13 at 19:33
where are you calling this function? can you show that code? — Ben McCormick, Apr 16 '13 at 19:34
@KevinB - I put console.log(data.TranslatedWord); after function(data) { and nothing shows up in the console. Even if I put console.log("hi"); I don't see anything. — Xaisoft, Apr 16 '13 at 19:37
@Xaisoft that means you should be getting `$("#product").text('Error: ' + err);` ran. What does that print? If you place an alert there, does it get called? — Kevin B, Apr 16 '13 at 19:37
You are overwriting the `translate` function with a boolean variable at some point. Please show more of your code (perhaps search for all occurrences of "translate" and show those lines and their context). — JJJ, Apr 16 '13 at 19:38
In developer tools, add `translate` to the Watch Expressions. This will stop when this gets redefined, and that should help you see where it's happening. — Barmar, Apr 16 '13 at 19:48
weird, I can reproduce it even without any javascript, this is a great question see here: http://jsfiddle.net/SR8Z3/7/ — Eran Medan, Apr 16 '13 at 19:58
looks like translate is some reserved word for chrome, changing the function to translatedWord worked. — Xaisoft, Apr 16 '13 at 20:03

Eran Medan · Answer 1 · 2013-04-16T20:20:05.283

7

It seems that in chrome all elements have a boolean property called translate, (e.g. console.log(document.body.translate) will display true in chrome, not sure why.

When you do onclick="translate();" then it simply calls it on the local DOM object scope (now why doesn't it call it on the window object is another question)

e.g. if you change translate to translate2 it should work, as weird as it sounds

edited Apr 16 '13 at 20:20

answered Apr 16 '13 at 20:04

Eran Medan

44,555
61
184
276

1

translate is a reserved word in chrome. Changing it to translateWord worked. – Xaisoft Apr 16 '13 at 20:06
yep, weird, I couldn't find any documentation on it, except this related SO question: http://stackoverflow.com/questions/13113914/removing-chromes-translate-dom-property – Eran Medan Apr 16 '13 at 20:16

score 4 · Accepted Answer · edited Jun 10 '13 at 13:52

4

It seems like the onclick isn't working.

Since you are already using jQuery I would suggest using the click event instead of having the onclick in the HTML. It is better practice to do so...

Try something like this:

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

And simply your HTML to this:

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

edited Jun 10 '13 at 13:52

chue x

18,573
7
56
70

answered Apr 16 '13 at 19:42

c0deNinja

3,956
1
29
45

The symptom suggests that something is redefining `translate` from a function to a boolean. Changing how the click handler is bound probably won't solve this. – Barmar Apr 16 '13 at 19:45
This actually worked, but why does it not work the other way? – Xaisoft Apr 16 '13 at 19:47
true... but from the code he has posted, we can't see what has redefined the translate function... so suggesting a different way of binding could solve it. – c0deNinja Apr 16 '13 at 19:48
@Xaisoft... not sure, which browser are you using? – c0deNinja Apr 16 '13 at 19:48
@c0deNinja - It works for the find function though, but not the translate function. – Xaisoft Apr 16 '13 at 19:52
1

Maybe rename translate to translateWord??? haha not sure, maybe chrome is using translate() – c0deNinja Apr 16 '13 at 19:58
lol, that has to be it, changing it to TranslateWord worked, so apparently translate is some reserved word in chrome. – Xaisoft Apr 16 '13 at 20:02
rename function name work for me( Ex: translatioe > googleTranslate), i think translate function try to overriding. i used this same code block for translation. – Chanuka Asanka Jul 22 '14 at 17:55

score 1 · Answer 3 · answered Apr 16 '13 at 19:54

1

The problem is that you're defining your translate() function inside the document.ready() function. These function definitions are local to that scope, they can't be accessed from onclick.

You don't need to put function definitions inside the ready handler, you only need statements that access the DOM immediately in there. Define it at toplevel and it should work.

Or, as c0deNinja suggested, use jQuery to bind the handler. If you do this inside the ready handler, it can call other functions defined in there.

answered Apr 16 '13 at 19:54

Barmar

741,623
53
500
612

I took out the document.ready and the other function. When running it in IE, it works, but in chrome, it does not. – Xaisoft Apr 16 '13 at 19:55
Thought so too, it's not, this is a tricky one see this http://jsfiddle.net/SR8Z3/7/ and look at the console – Eran Medan Apr 16 '13 at 19:58

boolean is not a function in javascript

3 Answers3