I want to set data-id after the user put a URL in an input, already tried a lot of samples that I found here and none of these worked...

// im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('/', '');
  document.getElementById('resultado').innerHTML = novaURL;
  imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}

<script async src="//s.imgur/min/embed.js" charset="utf-8"></script>
<!-- ... -->
<input type="text" id="txtURL">
<input onclick="getUrl()" type="submit">
<h3 id="resultado">Resultado:</h3>
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>

I want to set data-id after the user put a URL in an input, already tried a lot of samples that I found here and none of these worked...

//https://imgur./SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur./', '');
  document.getElementById('resultado').innerHTML = novaURL;
  imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}

<script async src="//s.imgur./min/embed.js" charset="utf-8"></script>
<!-- ... -->
<input type="text" id="txtURL">
<input onclick="getUrl()" type="submit">
<h3 id="resultado">Resultado:</h3>
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>

the data-id should be SPrSZV7, I got in the console the error Cannot read property 'setAttribute' of null, why is this null?

• javascript

• did you pass your JS code before body code ? – Mister Jojo Commented May 2, 2019 at 17:02
• no, my js code is above the body – Igor Commented May 2, 2019 at 17:21
• so that's why document.getElementById ('imagem') is null – Mister Jojo Commented May 2, 2019 at 17:25

3 Answers 3

What's happening is the imgur embed library is loading and overwriting your blockquote with an iframe, so your ID of "imagem" disappears when the iframe loads in its place. Trying wrapping the blockquote with a div container that has data-id attribute, and setting the data value there for reference. Or you can try and reference the imgur iframe ID that appears when embed happens: 'imgur-embed-iframe-pub-' instead of using a div wrapper. Please see the following example:

//https://imgur./SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur./', '');
  document.getElementById('resultado').innerHTML = novaURL;
  var imagem = document.getElementById('container-for-imgur');
  imagem.dataset.id = novaURL;
  console.log(imagem.dataset.id);
}

<script async src="//s.imgur./min/embed.js" charset="utf-8"></script>

<input type="text" id="txtURL" value="https://imgur./SPrSZV7" />
<input onclick="getUrl()" type="submit" />
<h3 id="resultado">Resultado:</h3>
<div id="container-for-imgur" data-id="">
  <blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
  </blockquote>
</div>

why is this null?

because you pass your JS code before body code ?

use dataset => https://developer.mozilla/en-US/docs/Web/API/HTMLElement/dataset

document.getElementById('imagem').dataset.id = novaURL;

remark : there is no return value so do not use imagem =

Your code works. You can see in inspect that the data attribute is correctly set up. You must have been experiencing a script load problem in which the content DOM is not loaded before the script execution.

    //https://imgur./SPrSZV7 im trying with this url
    function getUrl() {
        var txt = document.getElementById('txtURL').value;
        var novaURL = txt.replace('https://imgur./', '');
        document.getElementById('resultado').innerHTML = novaURL;
        imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
    }

<input type="text" id="txtURL">
    <input onclick="getUrl()" type="submit">
    <h3 id="resultado">Resultado:</h3>
    <blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
    </blockquote>