未捕获的类型错误：尝试下载图像 javascript 时无法读取 null 的属性（读取“src”）

Question

Hello i am creating an Qrcode generator, that after getting generated, i want to download it. i was able to use this code, and it worked at first, however i added a lot more code in my project, and it stopped working, with me getting this error

(index):337 Uncaught TypeError: Cannot read properties of null (reading 'src')
    at downloadcode ((index):337:51)
    at HTMLButtonElement.onclick ((index):74:91)

This is the html where my qrcode is generated, and the button where my click function is

 <!-- Div criada para criar o qrcode 1000x1000 que será utilizado no download, não sendo visivel
      na pagina-->
      <div id="download" style="display: none;"></div>


      <button disabled id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

This is my downloadcode method

  // Função que faz o download do qrcode em jpg
    function downloadcode() {

      var link = document.createElement("a");
      link.download = "qrcode.jpg";



      var teste = document.getElementById("download");


      link.href = teste.querySelector('img').src;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);


    }

This is how i make my QrCode (using easyqrcode.js) i don't think this is the matter, because i tried generate, like i was when it worked, but unfortunately this time hasn't worked, but i put it here anyway

var options_download = {
        text: texto,
        width: 1000,
        height: 1000,
        colorDark: $('input[name="favcolor"]').val(),
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,

        logoWidth: 475, // fixed logo width. default is `width/3.5`
        logoHeight: 475, // fixed logo height. default is `heigth/3.5`
        logo: imagem, // Relative address, relative to `easy.qrcode.min.js`
        logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
        logoBackgroundTransparent: false, // Whether use transparent image, default is false

      }

      new QRCode(document.getElementById("download"),options_download);

I understand that the error is saying that teste.querySelector('img').src is null, but i can't understand why, since it worked before (with the same code for the download function and the htlm)

Thank you in advance

Edit: to explain more what i am trying to do. I generate a QRcode, that appears on my Div with the ID = download, and then by clicking in the download button, i want to download it. Even without using img tags, it was working i added my complete html

      <div class="tab">
        <button class="tablinks" onclick="openForm(event, 'telephone')">Contacto</button>
        <button class="tablinks" onclick="openForm(event, 'email')">Email</button>
        <button class="tablinks" onclick="openForm(event, 'url')">Website</button>
        <button class="tablinks" onclick="openForm(event, 'maps')">Localização</button>
        <button class="tablinks" onclick="openForm(event, 'personal')">Personalizado</button>
      </div>

      <!--No input text, relativo ao código hexadecimal da cor, foi definido autocomplete="iasnsdijsdn" , visto
que autocomplete="off" é ignorado nos browsers mais recentes, quando se pretende desligar o autofill
(uma vez que quando se preenchia o formulario com os dados previamente guardados, a caixa relativa à
cor, era automaticamente preenchida com o email), e desta forma, faz com que essa caixa, não seja 
automaticamente preenchida-->
      <form id="form" autocomplete="off">
        <input type="text" id="name" name="name" placeholder="Inserir Nome" class="formbold-form-input" />
        <input type="tel" id="telephone" name="telephone" placeholder="Inserir Contacto Telefone"
          class="formbold-form-input" />
        <input type="email" id="email" name="email" placeholder="Inserir Email" class="formbold-form-input" />
        <input type="website" id="url" name="url" placeholder="Inserir Website" class="formbold-form-input" />
        <input type="website" id="maps" name="maps" placeholder="Inserir Ligação Google Maps"
          class="formbold-form-input" />
        <label id="labelcolor" for="favcolor">Definir cor: </label>
        <input type="color" onchange="changeCol()" id="favcolor" name="favcolor" value="#000000"
          class="formbold-form-input" />
        <input type="text" autocomplete="iasnsdijsdn" onchange="changeColBox()" id="colorcode" name="colorcode"
          value="#000000" class="formbold-form-input" />
        <label for="image" class="btn btn-primary btn-block btn-outlined">Upload Logo (opcional)</label>
        <input type="file" onchange="encodeImageFileAsURL(this)" style="display: none"
          accept="image/jpeg, image/png, image/jpg" id="image" name="image" class="formbold-form-input">
      </form>
      <button id="button" class="formbold-btn" onclick="generatecode(this.value)">
        Gerar QR code
      </button>

      <div id="qrcodes">
        <div id="qrcode_1" class="text-center"></div>
        <div id="qrcode_2" class="text-center"></div>
      </div>


  
      <div id="download" style="display: none;"></div>
      <!-- Div criada para criar o qrcode 1000x1000 que será utilizado no download, não sendo visivel
      na pagina-->
      


      <button disabled id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

    </div>
  </div>

And this is my old Html

 
      <input type="text" name="name" placeholder="Inserir Nome" class="formbold-form-input" />
      <input type="tel" name="telephone" placeholder="Inserir Contacto Telefone" class="formbold-form-input" />
      <input type="email" name="email" placeholder="Inserir Email" class="formbold-form-input" />
      <input type="website" name="url" placeholder="Inserir Website" class="formbold-form-input" />

      <button class="formbold-btn" onclick="generatecode()">
        Gerar QR code
      </button>


      <div id="qrcodes">
        <div id="qrcode_1" class="text-center"></div>
        <div id="qrcode_2" class="text-center"></div>
      </div>

      <!-- Div criada para criar o qrcode 1000x1000 que será realizado o download, não sendo visivel
      na pagina-->
      <div id="download" style="display: none;"></div>


      <button id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

    </div>
  </div>

My old wait of generate the qrcode

  new QRCode(document.getElementById("download"),


          {
            text: 'MECARD:' + 'N:' + name +
              ';TEL:' + $('input[name="telephone"]').val() +
              ';EMAIL:' + $('input[name="email"]').val() +
              ';URL:' + $('input[name="url"]').val() +
              ';;',
            width: 1000,
            height: 1000,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H

          });

And the download function

/ Função que faz o download do qrcode em jpg
    function downloadcode() {

      var link = document.createElement("a");
      link.download = "qrcode.jpg";



      var teste = document.getElementById("download");


      link.href = teste.querySelector('img').src;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

EDIT 2:

After trying several stuff, if i use

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" id="download" />

instead of

 <div id="download" class="text-center"></div>

the qrcode i try to generate the Qrcode to the img element, however my img continues blank.

However if i let my «download» stay only as a div, my Qrcore appear in it, as it should be. However after that happen, since it is not a img element, i am having problems in trying to get the URL (if i could get it, i think my problem would be solved)

Thank You again

Answer 1

Solved my problem! Was able to find this tutorial https://www.studentstutorial.com/javascript/convert-html-div-element using html2canvas, was able to turn my Div into a image, and then download it as normal