1

Estou tentando inserir um valor que estou pegando da url dentro do atributo HTML, da seguinte forma:

Fiz esta função

function urlId() {
    document.getElementsByTagName("BUTTON")[0].setAttribute("data-channel-external-id", "qs.id"); 
}

Quero inserir o valor dessa variável qs.id (qs.id é a variável de uma função que fiz para pegar um valor da url ex: meusite.com/pagina.php?id=VALOR que eu quero pegar e setar dentro do atributo HTML. Então fiz esse código acima e botei o seguinte no meu atributo data-channel-external-id="urlId()" porém não esta dando certo ...

4 Respostas 4

3

Para colocares o id da query string dentro de um atributo data- podes fazer assim:

function qsGet(chave) {
  var qs = location.query.slice(1);
  var pares = qs.split('&');
  for (var i = 0; i < pares.length; i++) {
    if (pares[i].indexOf(chave) == 0) return pares[i].split('=').pop();
  }
}

function urlId() {
  var id = qsGet('id');
  var btn = document.querySelector('button');
  btn.setAttribute("data-channel-external-id", id);
}

// para testar
location.query = '?id=12345';
urlId();
<button type="button" onclick="alert(this.dataset.channelExternalId);">Clica-me</button>

0

Na sua função que retorna o valor do atributo data-channel-external-id você pode identificar o botão que foi clicado e retornar o valor que for conveniente.

Eu usei o atributo data-botao em cada botão. Pela função qs(), sempre que um botão com data-botao="1" for clicado, ela passa a ter o atributo data-channel-external-id="10"

function urlId(botao) {

    botao.setAttribute("data-channel-external-id", qs(botao.getAttribute("data-botao")));
}

function qs(el) {

    //sua função que retorna o valor...

    if (el === '1') {
        return 10;
    }
    else if (el === '2') {
        return 11;
    }
    else if (el === '3') {
        return 13;
    }

}

function atributo(botao) {

   urlId(botao);
  
   alert('A função urlId() foi executada!\n\nMeu atributo data-channel-external-id agora é: ' +botao.getAttribute("data-channel-external-id"));

}
<button data-botao="1" onclick="atributo(this);">BOTAO 1 clique</button>
<button data-botao="2" onclick="atributo(this);">BOTAO 2 clique</button>
<button data-botao="3" onclick="atributo(this);">BOTAO 3 clique</button>

0

qs não está no escopo da função e você está utilizando ele mesmo assim.

O correto é você passar o objeto qs por parametro. Da seguinte forma:

function urlId(qs) {
    document.getElementsByTagName("BUTTON")[0].setAttribute("data-channel-external-id", qs.id); 
}

urlId(qs);
2
  • Infelizmente ainda não está setando o id da url dentro do atributo Commented 5/02/2017 às 2:03
  • 1
    "qs.id" é uma string...
    – Sergio
    Commented 5/02/2017 às 5:31
0

Com a função abaixo você ira pegar o atributo que desejar da URL.

function getParameterByName(name) {
    url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Agora você pega o primeiro elemento com tag button. Se fosse você adicionaria uma ID nesse botão.

var button = document.querySelector("button");
var urlId = getParameterByName("id");
button.setAttribute("data-channel-external-id", urlId);

Veja este código funcionando https://jsfiddle.net/51w85bcq/

Ao rodar inspecione elemento do botão que aparece no preview e vera que ele tem o ID da url.


Comece a utilizar o querySelector do javascript, já funciona bem nos navegadores e é muito mais simples.

Segue link da documentação.

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelector

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 .