How do I insert the value of a variable within an HTML attribute using pure Javascript

Question

How do I insert the value of a variable within an HTML attribute using pure Javascript

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I'm trying to insert a value that I'm getting from the url inside the HTML attribute, as follows:

I've done this function

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

I want to insert the value of this variable qs.id ( qs.id is the variable of a function that I did to get a value from the ex url: meusite.com/pagina.php?id=VALOR que I want to get and set the HTML attribute . So I made this code above and I put the following in my data-channel-external-id="urlId()" attribute but it is not working ...

javascript html html5 atributos

asked by anonymous 05.02.2017 / 02:23

4 answers

Letter ç in the VS Code editor How to add mascara in the input ajax via jquery?

score 2 · Answer 1

To put the id of the query string within a data- attribute you can do this:

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>

score 0 · Answer 2

In your function that returns the value of the data-channel-external-id attribute you can identify the button that was clicked and return the value that is convenient.

I used the data-botao attribute on each button. By the qs () function, whenever a button with data-botao="1" is clicked, it will have the 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>

score 0 · Answer 3

qs is not in the scope of the function and you are using it anyway.

The correct thing is you pass the object qs per parameter. As follows:

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

urlId(qs);

score 0 · Answer 4

With the function below you will get the attribute you want from the 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, " "));
}

Now you get the first element with tag button. If it were you would add an ID on this button.

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

See this working code link

When you run, inspect the button element that appears in the preview and you will see that it has the url ID.

Start using the javascript querySelector, it already works well in browsers and is much simpler.

Follow the documentation link.

link