Javascript only works if placed directly on the page

Asked

Viewed 283 times

3

I have some functions and they only work if they’re put in the same file where the code is that will use them. Break up with: 

<script type="text/javascript" src="js/funcoes.js"></script>

Function:

$(function($){
    $('#enviar').click(function (e) {
        var linhas = $('#linhas').val();
        var plantas = $('#plantas').val();
        var combo =$('#haoum').val();
        var area = $('#area').val();
        var resultado;
        var resultado2;

        if (combo == "ha") {
            resultado = (Number(area)*Number(10000))/(Number(linhas)*Number(plantas));
            $("#divPrincipal").html('<p class="alert-success">Você terá aproximadamente ' + resultado + ' plantas </p>');
            $("#divsecundaria").html('<p class="alert-success">Com estas configurações você poderá colher em média ' + area*Number(15) + ' toneladas </p>');
        } else {
            resultado = (Number(area))/(Number(linhas)*Number(plantas));
            $("#divPrincipal").html('<p class="alert-success">Você terá aproximadamente ' + resultado + ' plantas </p>');
            $("#secundaria").html('<p class="alert-success">Com estas configurações você poderá colher em média ' + (area/Number(24200))*Number(15) + ' toneladas </p>');
        }
    });
});

$(function($){ 
    $('#enviar2').click(function (e) {
        var linhas = $('#linhas2').val();
        var plantas = $('#plantas2').val();
        var combo = $('#haoum2').val();
        var area = $('#area2').val();
        var resultado;

        if (combo == "ha") {
            resultado=(Number(area))/(Number(linhas)*Number(plantas));
            $("#divPrincipal2").html('<p class="alert-success">Você terá aproximadamente ' + resultado + ' plantas </p>');
        } else {
            resultado = (Number(area)/Number(10000))/(Number(linhas)*Number(plantas));
            $("#divPrincipal2").html('<p class="alert-success">Você terá aproximadamente ' + resultado + ' plantas </p>');
        }    
    });
 });

Someone knows where it’s wrong?

javascript jquery
  • 5

    Has no need of 2 $(function($){. You can put everything within 1, remembering that you are using jquery, so you should include the jquery library before that file with the functions

  • 4

    And the cause of the problem is exactly what @Antonyalkmim said: what’s inside a $(function($){ does not see what is in the other. They are distinct scopes.

  • 1

    Also, check the Network Inspector and make sure that this file, in this directory is being found under the Request you need it.

1 answer

6


You’re probably having trouble placing your file on the page, make sure jQuery was linked to the page before your code.

To facilitate also, instead of creating two scopes of: 

$(function($){ });

You could put your . click() inside a ready Ocument:

$(document).ready(function(){
    $('#seletor1').click(function(){
       ...
    });
    $('#seletor2').click(function(){
       ...
    });
});

In addition to ensuring that events are tied to the elements after page loading, the code becomes more readable

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.