JavaScript类使用单击处理程序修改段落
创建一个JavaScript类“ModifyParague”，在这里构造函数接受段落元素。在构造函数中，使用document.createElement创建4个按钮（更改段落、粗体、颜色、大小和位置），并在每个按钮上添加click事件处理程序。单击粗体按钮将打开/关闭粗体 我的代码： HTMLJavaScript类使用单击处理程序修改段落,javascript,html,css,Javascript,Html,Css,创建一个JavaScript类“ModifyParague”，在这里构造函数接受段落元素。在构造函数中，使用document.createElement创建4个按钮（更改段落、粗体、颜色、大小和位置），并在每个按钮上添加click事件处理程序。单击粗体按钮将打开/关闭粗体 我的代码： HTML 在我的代码中，我在构造函数中创建一个按钮并在每个按钮上添加单击处理程序时遇到了一个问题。请告诉我如何继续除了您的语法错误（我将在后面的回答中介绍），您的主要问题是您没有将创建的按钮附加到DOM 这是一个有
在我的代码中，我在构造函数中创建一个按钮并在每个按钮上添加单击处理程序时遇到了一个问题。请告诉我如何继续除了您的语法错误（我将在后面的回答中介绍），您的主要问题是您没有将创建的
按钮DOM类修改段落{
建造师（分区）{
this.myDIV=div；
}
toggleBoldStyle（）{
//创建按钮。
var btn=document.createElement（'button'）；
//给它一些文本/值。
btn.textContent='切换粗体样式'；
//将click事件侦听器添加到按钮。
btn.addEventListener（'click'，function（）{
//如果字体重量为800，则将其设置为“正常”，否则，如果不是800，则将其设置为800”
//在addEventListener方法引用按钮中添加'this'关键字，要获取成员myDIV，我们只调用它，而不在前面加'this'（myDIV代替this.myDIV）。
myDIV.style.fontWeight=（myDIV.style.fontWeight=='800'）？“正常”：“800”；
});
//将按钮附加到DOM
this.myDIV.appendChild（btn）；
}
}
//测试。。。
var p=新的修改段落（document.getElementById（'myDIV'）；
p、 toggleBoldStyle（）
Lorem ipsum dolor sit amet，porttitor ut donec ut egestas，purus urna CONCENTETUER，arcu和vitae elementum nulla etiam in，sit leo lacus。拉奥里特、莫里斯、奥古斯特·康古斯、奥古斯特·康古斯、奥古斯特·奥古斯、厄洛斯·奥古斯特。弗林尼利亚·艾利芬德是自由的莫里斯·埃利芬德。纳拉努克坐。苏打水资源委员会主席faucibus mauris、urna lectus vitae、neque laoreet dapibus sapien在suscipit ut的nisl laoreet libero。苏打水坐在我们面前，别有用心地诅咒我们，还有生命之泉，别有用心地等待我们。两人都是秃鹫之王，一位ac奥奇·波特提托，一位佩伦茨克·维尼纳提斯·佩伦茨克的征服者，一位伟大的斗士，一位伟大的斗士。在这方面，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是。我的代码是：我的代码，
HTML:
EventListener中有一个div.style
。div是什么
或者您缺少一些代码。您正在构造函数中定义函数，但没有调用它。我修改了它，它的粗体。样式我的代码没有创建按钮以及任何功能。我不知道是什么问题谢谢你@ths。但是，当我尝试在浏览器中运行此操作时，控制台在.myDIV.appendChild（btn）；；处显示一个未捕获的类型错误；。我不知道是什么原因造成的。这与浏览器执行代码片段是一样的，那么问题在于你的代码，你能粘贴它吗？请看我上传的答案。“q2.js”是你放我答案的文件吗？如果是，则将其脚本标记放在
前面。
<!DOCTYPE html>
<html>
<head>
<title>Question-2</title>
<meta charset="UTF-8">
<script src="q2.js"></script>
<link rel="stylesheet" href="q2.css" />
</head>
<body>
<div id="myDIV" style="width:500px; ">Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.</div>
</body>
</ul>
</html>
class ModifyParagraph{
constructor(myDIV){
this.myDIV = myDIV;
function myFunction(){
var btn = document.createElement("BUTTON");
var bold = document.getElementById(myDIV);
btn.addEventListener('click', function(){
if (bold.style['font-weight']) {
bold.style.removeProperty('font-weight');
} else {
bold.style['font-weight'] = "800";
}
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Question-2</title>
<meta charset="UTF-8">
<script src="q2.js"></script>
</head>
<body>
<div id="myDIV" style="width:500px; ">Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.</div>
</body>
</ul>
</html>
class ModifyParagraph {
constructor(div) {
this.myDIV = div;
}
toggleBoldStyle() {
// create the button.
var btn = document.createElement('button');
// give it some text/value.
btn.textContent = 'toggle Bold styling';
// add click event listener to the button.
btn.addEventListener('click', function() {
// if the font-weight is 800 make it 'normal' else if it's other than 800 make it 800'
// add the 'this' keyword in the addEventListener method references the button, to get the member myDIV we'll just call it without preceding it by 'this'(myDIV in place of this.myDIV).
myDIV.style.fontWeight = (myDIV.style.fontWeight === '800') ? 'normal':'800';
});
// append the button to the DOM
this.myDIV.appendChild(btn);
}
}
// testing...
var p = new ModifyParagraph(document.getElementById('myDIV'));
p.toggleBoldStyle();