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

Question

I’m trying to insert a value I’m taking from the url inside the HTML attribute, as follows:

I’ve done this job

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

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

Answer 1

To put the id of the query string within an attribute data- you can do it like 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>

Answer 2

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);

Answer 3

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

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

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 take the first element with tag button. If you were you would add an ID to that button.

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

See this code working https://jsfiddle.net/51w85bcq/

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

---

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

Below is the documentation link.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector