Ir ao conteúdo
  • Cadastre-se
Mizrain Phelipe Sá

Javascript RESOLVIDO Função em javascript atrapalhando a outra!

Posts recomendados

Pessoal estou com um problema em minhas function pois criei duas para fazer o conteúdo oculto aparecer quando selecionado pelo option do select, porém o erro é que quando seleciona um o outro some e quando seleciona o outro ele vai pra debaixo da input errada, resumindo e como se as function estivessem ligadas, porém eu quero que elas sejam independentes, alguém me ajuda por favor?

 

Esse é o código HTML dos elementos:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                                <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                    <label>1.1.9 Orientação sexual da Vítima</label>
                                                    <select class="select-simple form-control pmd-select2 empty" onclick="selected(this.value)" id="119" name="119">
                                                        <option selected>Selecionar</option>
                                                        <option>NCI - Não Consta Informação</option>
                                                        <option>Heterossexual</option>
                                                        <option>Homossexual</option>
                                                        <option>Bissexual</option>
                                                        <option>Não se aplica (criança menor de 06 anos de idade)</option>
                                                        <option>Outro</option>
                                                    </select>
                                                </div>
                                                <!-- Esta Janela aparecerá se a opção "Outro" for MARCADA (JAVASCRIPT)-->
                                                <div class="form-group pmd-textfield input119" style="display:none;">
                                                    <input type="text" id="regular1" class="form-control" placeholder="Qual? Especifique.">
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                                <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                    <label>1.1.10 Identidade de gênero da vítima</label>
                                                    <select class="select-simple form-control pmd-select2 empty" onclick="selected(this.value)" id="1110" name="1110">
                                                        <option selected>Selecionar</option>
                                                        <option>NCI - Não Consta Informação</option>
                                                        <option>Andrógeno</option>
                                                        <option>Cisgênero</option>
                                                        <option>Transformista</option>
                                                        <option>Travesti</option>
                                                        <option>Transexual</option>
                                                        <option>Não se aplica (criança menor de 06 anos de idade)</option>
                                                        <option>Outro</option>
                                                    </select>
                                                </div>
                                                <!-- Esta Janela aparecerá se a opção "Outro" for MARCADA (JAVASCRIPT)-->
                                                <div class="form-group pmd-textfield input1110" style="display:none;">
                                                    <input type="text" id="regular1" class="form-control" placeholder="Qual? Especifique.">
                                                </div>
                                            </div>

 

E esse e o JavaScript com as duas Function que eu criei pra eles:

 

// CÓDIGO PARA OCULTAR/MOSTRAR elementos pelo SELECT

function selected(value) {
    var input1110 = document.getElementsByClassName('input1110');
    if (value != "Outro") {
        input1110[0].style.display = 'none';
    } else {
        input1110[0].style.display = 'block';
    }
}

function selected(value) {
    var input119 = document.getElementsByClassName('input119');
    if (value != "Outro") {
        input119[0].style.display = 'none';
    } else {
        input119[0].style.display = 'block';
    }
}

 

Alguém consegue me dizer onde esta o erro e porque as funções estão se interligando? 

 

desde já agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

As duas funções tem o mesmo nome, comece fazendo elas terem nomes diferentes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O tipo da função ta exatamente igual sem nenhuma mudança function(var1) function(var1)

 

Você teria que fazer algo versátil para qualquer documento ou mudar o nome de uma das funções... eu faria assim:

function selecionar(name, show=true) {
    var input = document.getElementsByClassName(name);
    if (show) {
        input[0].style.display = 'block';
    } else {
        input[0].style.display = 'none';
    }
}

assim basta usar selecionar("input1110", true) para mostrar e selecionar("input1110", false) para esconder...

 

Esqueci de falar que usar nome de funções que provavelmente já existam anteriormente declaradas na própria linguagem pode gerar conflito

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
21 horas atrás, Arthur Guillermo disse:

O tipo da função ta exatamente igual sem nenhuma mudança function(var1) function(var1)

 

Você teria que fazer algo versátil para qualquer documento ou mudar o nome de uma das funções... eu faria assim:


function selecionar(name, show=true) {
    var input = document.getElementsByClassName(name);
    if (show) {
        input[0].style.display = 'block';
    } else {
        input[0].style.display = 'none';
    }
}

assim basta usar selecionar("input1110", true) para mostrar e selecionar("input1110", false) para esconder...

 

Esqueci de falar que usar nome de funções que provavelmente já existam anteriormente declaradas na própria linguagem pode gerar conflito

 

Eu fiz seguindo suas dicas mais mesmo assim continua dando erro, se poder me mostrar a correção no meu próprio código eu agradeceria.

 

Obs: ainda apanho muito pra JS 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Mizrain Phelipe Sá Você mudou os nomes da função? O nome selected você mudou para testar? (Se não me engano o JS já tem uma função declarada como selected)

 

Qual seria o erro?

 

No seu codigo eu mudaria para selected1 e selected2 para evitar conflitos, tentaria utilizar dessa maneira que é o que provavelmente esta gerando o conflito.

O conflito do seu codigo é por que ou estão usando uma coisa já declarada no javascript no nome da função ou por que você declarou a mesma função com diferentes códigos (Ou até mesmo igual)

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Arthur Guillermo Bom dia amigo!

 

Consegui resolver valeu pela dica de mudar o nome das function, porém tive que fazer outras modificações no código, porém agora não estou conseguindo ainda RESETAR os valores inseridos no select e na input quando eles são fechados e aberto novamente.

Fico assim o código:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                                <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                    <label>1.1.9 Orientação sexual da Vítima</label>
                                                    <select class="select-simple form-control pmd-select2 empty" onchange="verificaSelect(this)">
                                                        <option selected>Selecionar</option>
                                                        <option>NCI - Não Consta Informação</option>
                                                        <option>Heterossexual</option>
                                                        <option>Homossexual</option>
                                                        <option>Bissexual</option>
                                                        <option>Não se aplica (criança menor de 06 anos de idade)</option>
                                                        <option>Outro</option>
                                                    </select>
                                                </div>
                                                <!-- Esta Janela aparecerá se a opção "Outro" for MARCADA (JAVASCRIPT)-->
                                                <div class="form-group pmd-textfield opcaoQuais" style="display:none;">
                                                    <input type="text" id="regular1" class="form-control" placeholder="Qual? Especifique.">
                                                </div>
                                            </div>

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                                <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                                    <label>1.1.10 Identidade de gênero da vítima</label>
                                                    <select class="select-simple form-control pmd-select2 empty reset1110" onchange="verificaSelect1(this)">
                                                        <option selected>Selecionar</option>
                                                        <option>NCI - Não Consta Informação</option>
                                                        <option>Andrógeno</option>
                                                        <option>Cisgênero</option>
                                                        <option>Transformista</option>
                                                        <option>Travesti</option>
                                                        <option>Transexual</option>
                                                        <option>Não se aplica (criança menor de 06 anos de idade)</option>
                                                        <option>Outro</option>
                                                    </select>
                                                </div>
                                                <!-- Esta Janela aparecerá se a opção "Outro" for MARCADA (JAVASCRIPT)-->
                                                <div class="form-group pmd-textfield opcaoQuais1" style="display:none;">
                                                    <input type="text" id="input1110" class="form-control reset1110" placeholder="Qual? Especifique.">
                                                </div>
                                            </div>

Código JS (usando JQuery)

function verificaSelect(el) {

    let input = $(el).find(":selected").text().toUpperCase();
    
    if (input === "OUTRO" | input === "SIM") {
        //$(el).parents(".row:first").find(".opcaoQuais:first").css('display', '');   
        $(".opcaoQuais").css('display', '');

        //$(el).parents(".row:first").find(".buttonhide:first").css('display', '');
    }
    else {
        $(".opcaoQuais").css('display', 'none');
        $(".opcaoQuais").val("");
        //$(el).parents(".row:first").find(".opcaoQuais").css('display', 'none');        
                
        //$(el).parents(".row:first").find("input, select").attr('value', '').val('');

        //$(el).parents(".row:first").find(".opcaoDeferida").css('display', 'none');
        //$(el).parents(".row:first").find(".buttonhide").css('display', 'none');
    }
}

function verificaSelect1(el) {

    let input1 = $(el).find(":selected").text().toUpperCase();

    if (input1 === "OUTRO" | input1 === "SIM") {
        $(".opcaoQuais1").css('display', '');

        //$(el).parents(".row:first").find(".buttonhide:first").css('display', '');
    }
    else {

        $(".opcaoQuais1").css('display', 'none');
        $(".opcaoQuais1").val("");

        //$(el).parents(".row:first").find(".opcaoDeferida").css('display', 'none');
        //$(el).parents(".row:first").find(".buttonhide").css('display', 'none');
    }
}

Se poder me ajudar agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Mizrain Phelipe Sá

 

Coloque isto dentro do bloco de else da primeira função.

$("#regular1").val("");

 

E isto no bloco do else da segunda função:

$("#input1110").val("");

 

Basicamente, você estava tentando "limpar" o elemento div com  class .opcaoQuais, onde na verdade você deveria informar o elemento input seja por class ou por ID. No exemplo, usei suas IDs.

 

Código completo:

function verificaSelect(el) {

    let input = $(el).find(":selected").text().toUpperCase();
    
    (input === "OUTRO" | input === "SIM") ? $(".opcaoQuais").css('display', '')  :  
                                            $(".opcaoQuais").css('display', 'none'); 
                                            $("#regular1").val("");   
}

function verificaSelect1(el) {

    let input1 = $(el).find(":selected").text().toUpperCase();
    
    (input1 === "OUTRO" | input1 === "SIM") ?  $(".opcaoQuais1").css('display', '') : 
                                               $(".opcaoQuais1").css('display', 'none'); 
                                               $("#input1110").val("");   

 

Veja funcionando:  https://jsfiddle.net/dife/4h5wugpo/19/

 

Foi usado o método de IF ternário, onde o bloco se IF é denominado com " ? "   e o bloco de ELSE é denominado com  " : "

 

Isso reduz bastante as linhas de código ainda mais com um IF e else simples destes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

ebook grátis "Aprenda a ler resistores e capacitores", de Gabriel Torres

GRÁTIS! BAIXE AGORA MESMO!