我正在尝试制作一个简单的页面。 这将获取软件名称、存储库链接和解决错误的分支。 您进入此页面并粘贴软件名称和链接。
点击提交按钮。
将出现要在终端中写入的命令。 所以你可以简单地复制粘贴它。
我尝试通过首先将可见性设置为隐藏，然后在 JS 中将其更改为可见来实现它。
但是我收到此错误：TypeError：codeBlock 为空。在 JavaScript 代码中
这里是代码 GitHub 链接
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>
重要的CSS
.message {
visibility: hidden;
margin-top: 5rem;
}
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);
});
};
样式.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;
}
如果
querySelectornull在您的情况下，您尝试选择
document.querySelector("div.code-block>pre>code");code_blockpre我想通了。 我在 codeBlock 中使用了错误的 CSS 选择器
let codeBlock = document.querySelector("div.code-block>pre>code");
正确的选择器是
let codeBlock = document.querySelector("div.code-block>code");
我还错误地评论了文案。
let copytext = code.innerText;
感谢大家的帮助。