单击时按钮不会出现在 html 中
美好的一天，我使用 DOM 创建按钮，并在 JavaScript 中单击时切换以更改 HTML 文件中的段落，但是，这些按钮没有出现在 html 中，我已经将其设置为位于段落。我使用 CSS 来设置按钮的样式。以下是 JC、HTML 和 CSS 文件：
HTML：
<!DOCTYPE html>
<head>
<link scr="stylesheet" type="text/css" href="A3 .css">
<script src="A3.js"></script>
</head>
<div id ="button_containter"></div>
<body id= target_p>
In considering any new subject, there is frequently a tendency, first, to overrate what we find to be already interesting
or remarkable; and, secondly, by a sort of natural reaction, to undervalue the blue state of the case, when we do
discover that our notions have surpassed those that were really tenable
</body>
</html>
JS：
let para = document.getElementById("target_p");
class ParagraphChanger {
constructor (p){
this.p=p;
var btnDiv = document.getElementById("button_containter");
let btnBold = this.createButton("toggle bold");
btnBold.addEventListener('click',() => this.makeBold());
btnDiv.appendChild(btnBold);
let widthBtn = this.createButton("toggle width");
widthBtn.addEventListener('click', () => this.changedWidth());
btnDiv.appendChild(widthBtn);
let clrBtn = this.createButton("togglt color");
clrBtn.addEventListener('click', () => this.changeColor());
clrBtn.appendChild(clrBtn);
let szBtn = this.createButton("toggle size");
szBtn.addEventListener('click', () => this.changeSize());
}
createButton (name){
const btn = document.createElement('button_container');
const buttonName = document.createTextNode(name);
buttonName.appendChild(buttonName);
return btn;
}
makeBold(){
// changing the size to bold, getting it from CSS s
this.p.classList.toggle("Toggle_bold");
}
changedWidth(){
this.p.classList.toggle('Toggle_width');
}
changeColor(){
this.p.classList.toggle('Toggle_width');
}
changeSize(){
this.p.classList.toggle('Toggle_size');
}
阿波罗的战车1回答
-
拉丁的传说
JS问题：首先，当您调用 时document.createElement()，您不小心传入了容器的名称。相反，您应该传入button，如下所示：const btn = document.createElement('button');接下来，您不需要创建文本节点。btn.innerText = name会工作得很好;)最后，你不小心在你的new ParagraphChanger(document.getElementById('target_p;'));.另外，您将调用放在类window.onload 内部；把它搬到外面去！CSS 问题：font: bold;不起作用，你需要使用font-weight: bold;另外，您忘记了选择器中的句点Toggle_bold。应该是.Toggle_bold选择班级。这是包含最终固定代码的 CodePen。我希望这能解决您的问题！ -
翻翻过去那场雪
由于您的代码有很多问题，因此进行了一些编辑。容器 ID 有一个拼写错误，该按钮是使用 Button_container 创建的，它实际上是 ID 等。下面您可以看到按钮是如何创建的。创建元素：在 createElement 中，我们必须指定标签名称而不是 ID 本身来创建新的 html 元素。document.createElement('button'); //p tag, h1,h2,h3 tags etc, divs设置属性：对于 id，我们使用setAttribute来设置指定元素上的属性值。如果属性已经存在，则更新值；否则，将添加具有指定名称和值的新属性。btn.setAttribute("id", "button_content"); //Ids,classes and data-attribute //id="myid", class="myclass", data-myid=1内文：最后对于值，我们使用innerText设置按钮的文本并调用onLoad。btn.innerText ="Click me";完整代码：<!DOCTYPE html><html><head> <title>Website Project</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><style>Toggle_bold { font: bold;}.Toggle_width{ width: 50%;}.Toggle_width{ color: #ff2800;}.Toggle_size{ font-size: 100%;}#button_containter{ display: flex; align-items: center; justify-content: center; text-align: center;}</style></head><body><div id ="button_container"></div><script>function createButton (name){ const btn = document.createElement('button'); //Add button with create Element btn.setAttribute("id", "button_content"); //Add Id with setAttribute method btn.innerText ="Click me";// Add value of the button with innerText property let container = document.getElementById("button_container"); //Fetch container div console.log(btn); console.log(container); container.appendChild(btn); //Append button to it.}function makeBold(){// changing the size to bold, getting it from CSS s this.p.classList.toggle("Toggle_bold");}function changedWidth(){ this.p.classList.toggle('Toggle_width');}function changeColor(){ this.p.classList.toggle('Toggle_width');}function changeSize(){ this.p.classList.toggle('Toggle_size');}window.onload = () => { createButton();// call button function here to create the button}</script></body></html>最后，我相信我们通过实践来学习，所以我希望这有助于消除一些困惑并解决您的问题:)。
随时随地看视频慕课网APP
PHP