美好的一天，我使用 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 回答
拉丁的传说
TA贡献1789条经验 获得超8个赞
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。
我希望这能解决您的问题！
翻翻过去那场雪
TA贡献2065条经验 获得超13个赞
由于您的代码有很多问题，因此进行了一些编辑。容器 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>
最后，我相信我们通过实践来学习，所以我希望这有助于消除一些困惑并解决您的问题:)。
- 1 回答
- 0 关注
- 59 浏览
添加回答
举报
0/150
提交
取消