1

Olá.

Estou com esse código que não está conseguindo capturar essa variável.

HTML, tentativa 1:

<html>
    <head>
                <meta charset="utf-8" />
        <script src="js.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p><a onclick="funcao()">Clique aqui!</a></p>
    </body>
</html>

JavaScript (com jQuery), tentativa 1:

var link;
var testando="Testando essa <a href=\""+link+"\">variável</a> aqui.";
function funcao(){
    link="http://www.google.com";
    $('p').html(testando);
}

HTML, tentativa 2:

<html>
    <head>
                <meta charset="utf-8" />
        <script src="js.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p><a onclick="funcao('www.google.com.br')">Clique aqui!</a></p>
    </body>
</html>

JavaScript (com jQuery), tentativa 2:

var link;
var testando="Testando essa <a href=\""+link+"\">variável</a> aqui.";
function funcao(link){
    $('p').html(testando);
}

Em nenhuma das duas, a variável "link" é recebida, ficando com o valor "undefined" (indefinido).

Essa é a forma inicial que funciona (mas estou otimizando):

HTML da tentativa 1;

JavaScript (com jQuery):

var link;
var testandoi="Testando essa <a href='";
var testandoii="'>variável</a> aqui.";
function funcao(link){
    $('p').html(testandoi+link+testandoii);
}

Acho totalmente desnecessário declarar duas variáveis pra uma só sentença.

Se alguém tiver uma solução, desde já agradeço.

1
  • Tente passar a variável quando chamar a função, sem criar o "var link". O JS pode entender que seja uma variável local e não retorna o desejado. Commented 20/03/2015 às 16:34

3 Respostas 3

3

Thiago, acredito que você está tendo alguma problema para entender o escopo de uma variável e a natureza imutável de uma string.

quando você está concatenando strings, você não está juntando a referencia das mesmas, mas uma copia dos seus valores.

então ao fazer o seguinte:

var testando="Testando essa <a href=\""+link+"\">variável</a> aqui.";

você está fazendo um copia da variável link naquele momento.

para obter o resultado que você espera sem modificar muito o seu codigo, é preciso transformar a variavel testando em um método.

var link;
var getTestando = function () {
  return "Testando essa <a href=\"" + link + "\">variável</a> aqui.";
}
function funcao(){
    link = "http://www.google.com";
    $('p').html(getTestando());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a onclick="funcao()">Clique aqui!</a></p>

E como sugerido pelo Oeslei, a forma mais simples seria da seguinte forma:

function funcao(link){
    $('p').html("Testando essa <a href=\"" + link + "\">variável</a> aqui.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a onclick="funcao('http://www.google.com')">Clique aqui!</a></p>

2
  • 2
    Ainda mais simples seria utilizar a variável link como parâmetro. Iria eliminar uma variável global, diminuir uma linha desnecessária na chamada da função e impedir que a depuração do código fique complicada em algum momento por algum script alterar a variável link.
    – Oeslei
    Commented 20/03/2015 às 16:47
  • 1
    @Oeslei, com certeza esta seria a melhor forma, porém também não entendi por que ele tentou complicar tanto, talvez estive-se tentando fazer de alguma forma exótica. Commented 20/03/2015 às 16:52
1

O problema que tens no exemplo 1 é bom para explicar o que te está a falhar. Quando tens:

var link;
var testando="Testando essa <a href=\""+link+"\">variável</a> aqui.";
function funcao(){
    link="http://www.google.com";
    $('p').html(testando);
}

e chamas a função funcao() a variável testando já está defenida. Ou seja, desde o momento que essa linha var testando="Testando essa <a href=\""+link+"\">variável</a> aqui."; corre que o seu valor fica "fechado".

O que pretendes é que essa variável seja completada só no momento em que corres uma função. Aí estás a pensar corretamente no teu ultimo exemplo. Nesse caso tens uma função que quando é chamada recebe como argumento o pedaço que falta link e aí pode criar a string final no momento certo.

Repara porém que nesse caso é irrelevante teres a variável link defenida no escopo anterior pois quando dás um nome de variável como argumento de uma função ele cria novo escopo. Por exemplo:

var link = 'foo';
function fn(link){
    alert(link);
}

fn('lalala'); // o alert vai dar "lalala" e não "foo"

Assim a tua função podia ser somente:

var testandoi = "Testando essa <a href='";
var testandoii = "'>variável</a> aqui.";

function funcao(link) {
    $('p').html(testandoi + link + testandoii);
}

Mas se percebi bem o que precisas é saber o link que foi clicado? então podes ter no HTML:

<p><a href="http://google.com" onclick="funcao(event)">Clique aqui!</a></p>

e atua função a ir buscar o link ao event.target que aponta para o elemento <a>que foi clicado:

function funcao(e) {
   e.preventDefault(); // junta esta linha para impedir que o link faça navegar para outra página
   var link = e.target.href;
   alert(link);
}

Exemplo: https://jsfiddle.net/vLy1x8ke/

0

Se você desejar manter a string de substituição como recurso externo a função, você pode utilizar ela fora e substituir o valor dinamicamente, utilizando a função String.format (não há nativa, então criei uma versão, baseada nessa)

String.format = function() {
  // The string containing the format items (e.g. "{0}")
  // will and always has to be the first argument.
  var theString = arguments[0];

  // start with the second argument (i = 1)
  for (var i = 1; i < arguments.length; i++) {
    // "gm" = RegEx options for Global search (more than one instance)
    // and for Multiline search
    var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
    theString = theString.replace(regEx, arguments[i]);
  }

  return theString;
}

var patternTest = "Testando essa <a href=\"{0}\">variável</a> aqui."

function funcao(link) {
  $('p').html(String.format(patternTest, link));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a onclick="funcao('http://www.google.com')">Clique aqui!</a>
</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .