美好的一天，我使用 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條經驗 獲得超14個贊
由于您的代碼有很多問題，因此進行了一些編輯。容器 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" >
? ? <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 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消