Question 211466 in Html Question posted in
Some basic documentation can be found here.

Html – I am getting this error in javascript TypeError: codeBlock is null. Help me out. Thanks in advance

I was trying to make a simple page.
That would get the software name the repo link and the branch to solve an error.
You go to this page and paste the software name and link.

Hit the submit button.

The command to be written in the terminal would appear.
So you could simply copy-paste it.

I tried implementing it by first setting visibility to hidden and then changing it to visible in JS.

But I am getting this error : TypeError: codeBlock is null. in the javascript code

Here is the code GitHub link

the html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>gpg apt-key depreceated</title>
 <link rel="stylesheet" href="style.css">
 <script src="script.js" defer></script>
</head>
<body>
 <header>
 <p class="h2">
        apt-key is deprecated. <br>
        Manage keyring files in trusted.gpg.d instead
 </p>
 </header>


<div class="tool">

 <form class="apt-key-deperecated">
 <label> Enter teh name of the software </label><br>
 <input type="text" name="name"> <br> 
 <label > Enter the url and the branch given</label> <br>
 <input type="text" name="url" id="url">
 <br>
 <button class="submit" onclick="showCommand(event)">Submit</button>


</form>
 <div class="message">
            Now paste this in your terminal <br>
 <button class="copy-button" onclick="copyCode()">Copy Code</button> <br>
 <div class="code-block">
 
 <code>
 
 </code>
 
 </div>

 </div>

 </div>

 
</body>
</html>

the important css

.message {
 visibility: hidden;
 margin-top: 5rem;

}

the script.js

let showCommand = (event) => {
 event.preventDefault(); // Prevent the default form submission behavior

 console.log("show command is working.");

 // Write the correct code
 writecode();

 // Get the element by its class
 var myDiv = document.querySelector('.message');

 // Change the display property to make it visible
 myDiv.style.visibility="visible";
};

let writecode = () => {
 console.log("writecode is working");
 
 // Initialize the codeBlock variable
 let codeBlock = document.querySelector("div.code-block>pre>code");
 
 // Now making the text
 
 // Getting the software name
 let softwareName = document.querySelector('input[name="name"]').value;
 
 // Getting the URL
 let inputURL = document.querySelector("#url").value;
 
 // The output text
 let lines = `curl -sS <span class="math-inline">${inputURL} | gpg --dearmor | sudo tee /usr/share/keyrings/</span>${softwareName}.gpg
 
    deb [signed-by=/usr/share/keyrings/${softwareName}.gpg] <span class="math-inline">${inputURL} | sudo tee /etc/apt/sources.list.d/</span>{softwareName}.list`;
 
 //to write to code
 codeBlock.innerHTML = lines;
 
    };

function copyCode() {
 var codeBlock = document.querySelector('.code-block');
 var code = codeBlock.querySelector('code');

 var range = document.createRange();
 range.selectNode(code);

 var selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);

 // let copytext = code.innerText;

 navigator.clipboard.writeText(copytext)
        .then(() => {
 alert('Code copied!');
        })
        .catch((error) => {
 console.error('Unable to copy code:', error);
        });
};

the style.css

p.h2 {
 color: rgb(236, 123, 170);
 font-size: 2.4rem;

 text-align: center;
}

.tool {
 margin: 5rem 20vw 4rem 20vw;
}

form>label{
 margin-top: 0.7rem;
 margin-bottom: 0.7rem;
}

form>input{
 margin-top: 0.7rem ;
 margin-bottom: 0.7rem;
}
.submit {
 background-color: rgb(32, 206, 32);
 margin-top: 1.2rem;
}

.message {
 /*
    display: none; */
 visibility: hidden;
 margin-top: 5rem;

}

.code-block {
 border: solid 2px red;
 text-align: left;
}

code {
 /* width: 60vw;*/
 width: fit-content;

 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
 color: lightgreen;

 background-color: rgb(70, 62, 62);

}

.copy-button {
 margin-top: 1rem;
 margin-bottom: 1rem;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. I was using a wrong CSS selector for the codeBlock

    let codeBlock = document.querySelector("div.code-block>pre>code");

    The correct selector is

    let codeBlock = document.querySelector("div.code-block>code");

    Also I had commented the copytext by mistake.

    let copytext = code.innerText;

    Thanks everyone for your help.


  2. 0

    If a querySelector call gives you null, you can be sure that the selector is wrong, or that there is no element matching that selector.

    In your case, you are trying to select document.querySelector("div.code-block>pre>code"); but code_block does not have a direct child of tag pre.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search