Javascript 单击时使用粗体字体
我试图使文本变为粗体时,它被点击,当它再次点击它将恢复正常。函数addBord(e)是我到目前为止得到的,但我不确定我是否在正确的轨道上,或者我下一步应该做什么。谁能告诉我下一步该做什么Javascript 单击时使用粗体字体,javascript,html,Javascript,Html,我试图使文本变为粗体时,它被点击,当它再次点击它将恢复正常。函数addBord(e)是我到目前为止得到的,但我不确定我是否在正确的轨道上,或者我下一步应该做什么。谁能告诉我下一步该做什么 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Address Book</title>
<script type="text/javascript">
function addressBookItem (fname, lname, email) {
this.fname= fname;
this.lname = lname;
this.email = email;
}
addressBookItem.prototype.write = function() {
// var adrbook = "<p class='ab' First Name: " + this.fname + "<br />";
var adrbook = "<tr><td>"+ this.fname + "</td>";
adrbook += "<td>" + this.lname + "</td>";
adrbook += "<td>" + this.email + "</td></tr>";
document.write(adrbook);
}
function appendRow() {
var theTable = document.getElementById("addressBookTbl");
// create a newRow
var newRow = document.createElement("tr");
var c1 = document.createElement("td");
var c2 = document.createElement("td");
var c3 = document.createElement("td");
var v1 = document.createTextNode(prompt("Please enter first name"));
var v2 = document.createTextNode(prompt("Please enter last name"));
var v3 = document.createTextNode(prompt("Please enter email"));
c1.appendChild(v1);
c2.appendChild(v2);
c3.appendChild(v3);
// newRow <- c1;
newRow.appendChild(c1);
newRow.appendChild(c2);
newRow.appendChild(c3);
theTable.appendChild(newRow);
newRow.style.color="green";
}
newRow.addEventListener('click', addBord, false);
function addBord(e) {
var target = e.target || event.srcElement;
if(target.style.fontWeight=="bold")
target.style.fontWeight="normal";
else
target.style.fontWeight="bold";
}
</script>
</head>
<body>
<script type="text/javascript">
var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
aB1.write();
aB2.write();
document.write("</table>");
</script>
<form>
<br />
<input type="button" value="append new row" onclick="appendRow()"/>
</form>
</body>
</html>
我得到了答案。其实很简单。事件侦听器位于appendrow函数外部。请遵循以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Address Book</title>
<script type="text/javascript">
function addressBookItem (fname, lname, email) {
this.fname= fname;
this.lname = lname;
this.email = email;
}
addressBookItem.prototype.write = function() {
// var adrbook = "<p class='ab' First Name: " + this.fname + "<br />";
var adrbook = "<tr><td>"+ this.fname + "</td>";
adrbook += "<td>" + this.lname + "</td>";
adrbook += "<td>" + this.email + "</td></tr>";
document.write(adrbook);
}
function appendRow() {
var theTable = document.getElementById("addressBookTbl");
// create a newRow
var newRow = document.createElement("tr");
var c1 = document.createElement("td");
var c2 = document.createElement("td");
var c3 = document.createElement("td");
var v1 = document.createTextNode(prompt("Please enter first name"));
var v2 = document.createTextNode(prompt("Please enter last name"));
var v3 = document.createTextNode(prompt("Please enter email"));
c1.appendChild(v1);
c2.appendChild(v2);
c3.appendChild(v3);
// newRow <- c1;
newRow.appendChild(c1);
newRow.appendChild(c2);
newRow.appendChild(c3);
theTable.appendChild(newRow);
newRow.style.color="green";
newRow.addEventListener('click', addBord, false);//event listener inside the function
}
function addBord(e) {
var target = e.target || event.srcElement;
if(target.style.fontWeight=="bold")
target.style.fontWeight="normal";
else
target.style.fontWeight="bold";
}
</script>
</head>
<body>
<script type="text/javascript">
var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
aB1.write();
aB2.write();
document.write("</table>");
</script>
<form>
<br />
<input type="button" value="append new row" onclick="appendRow()"/>
</form>
</body>
</html>
好吧,代码是有效的。你的问题是什么?代码看起来不错,但是你不应该使用document.write
来添加这样的HTML元素@Andy他对addBord()有意见function@GuillaumeHarari我刚刚测试了你的整个页面,问题不在于功能,而在于你的newRow
超出了范围,JS错误是test.html:43未捕获引用错误:test.html:43未定义newRow,因为您尝试在appendRow
之后访问它