我有一个主要的div。 我用很多子div（每个包含一个单词）填充它（点击导入文本） 我有一个sub-div的“onclick”功能，允许用户选择它们（它们改变颜色），以及许多其他时髦的东西 然后我清除主div（我尝试将innerHTML设置为“”或者在循环中杀死子节点） 然后我再次使用子div重新填充主div（再次单击导入文本） 这一次，当我点击“儿童”时，虽然在调试模式（F12）中它们似乎得到了事件并且它们是以编程方式进行的背景颜色更改，但它并没有在视觉上改变!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family: tahoma;
font-size: 12pt;
}
.t {
width:800px;
height:300px;
background-color:#FFF;
border: solid 1px #CCF;
}
.m {
width:800px;
height:300px;
background-color:#EFF;
border: solid 1px #CCF;
}
.d {
float: left;
border-right: solid 1px #CCF;
border-bottom: solid 1px #CCF;
padding-left:2px;
padding-right: 2px;
}
.but {
width:100px;
}
</style>
<script src="../fdlnew.js"></script>
<script>
var ss = null;
function subImport() {
ss.importText(document.getElementById("textBox").value);
}
function doit() {
document.getElementById("divStat").style.visibility="hidden";
divMain = document.getElementById("divMain");
ss = new subit(divMain);
}
function stat (s) {
statDiv = document.getElementById("divStat");
statDiv.innerHTML += s + "<br>";
statDiv.scrollTop = statDiv.scrollHeight;
}
function subit (divMain) {
bigThis = this;
this.divMain = divMain;
// some color constants
nbg = "#EFF";
hbg = "orange";
sbg = "#AFA";
cbg = "#AAF";
// the main word object array
this.warr = [];
this.importText = function(txt) {
while ( this.divMain.firstChild )
this.divMain.removeChild( this.divMain.firstChild );
var parts = txt.split(" ");
for (i=0; i<parts.length; i++) {
this.warr[this.warr.length] = new word(i, parts[i], this.divMain);
}
}
function word(id, txt, container) {
this.txt = txt;
this.id = id;
this.div = document.createElement('div');
this.div.innerHTML = this.txt; // + " "
this.div.className = "d";
this.div.setAttribute("id", "d" + this.id);
divMain.appendChild(this.div);
this.timestamp = 0;
this.isLastSelected = false;
this.isSelected = false;
this.steppedOn = false;
this.div.onclick = function () {
thisId = parseInt(this.id.substr(1));
bigThis.warr[thisId].gotClicked();
}
}
word.prototype.gotClicked = function () {
gLastSel = -1;
// FIRST, fix ME!!
if (!this.isSelected) {
this.isSelected = true;
this.isLastSelected = true;
gLastSel = this.id;
} else {
this.isSelected = false;
this.isLastSelected = false;
gLastSel = -1;
}
this.setBG();
// now we check the others ...
var nowLastSel = -1;
for (i=0; i<bigThis.warr.length; i++) {
if (bigThis.warr[i].id != this.id && bigThis.warr[i].isSelected ) {
if (!event.ctrlKey && this.isSelected) {
bigThis.warr[i].isSelected = false;
bigThis.warr[i].isLastSelected = false;
} else {
if (bigThis.warr[i].isLastSelected) {
if (gLastSel == -1) gLastSel = i;
else bigThis.warr[i].isLastSelected = false;
}
nowLastSel = i;
}
}
bigThis.warr[i].setBG();
}
if (gLastSel==-1) gLastSel = nowLastSel;
if (gLastSel!=-1) {
bigThis.warr[gLastSel].isLastSelected = true;
bigThis.warr[gLastSel].setBG();
}
}
word.prototype.stepOn = function (ts) {
if (wordCurStep!=-1)
bigThis.warr[wordCurStep].stepOff();
this.timestamp = ts;
this.steppedOn = true;
wordCurStep = this.id;
this.setBG();
}
word.prototype.stepOff = function () {
this.steppedOn = false;
this.setBG();
wordCurStep = -1;
}
word.prototype.setBG = function () {
var bgcol = nbg;
if (this.steppedOn) {
bgcol = hbg;
} else {
if (this.isSelected)
bgcol = this.isLastSelected ? cbg : sbg;
}
this.div.style.backgroundColor = bgcol;
}
word.prototype.getText = function() { return(this.txt); }
word.prototype.setStamp = function(stamp) { this.stamp = stamp; }
word.prototype.getStamp = function() { return(this.stamp); }
}
</script>
</head>
<body onload = "doit();">
1. Paste Text Here: <br>
<textarea id="textBox" class="t" rows="10" >
Marconi was born in Bologna in 1874. From 1890 to 1893, he studied physics at the technical school in Livorno.
In 1894 he started experimenting with radio waves and discovered how to transmit them over short distances.
Unfortunately he did not receive much encouragement in Italy and his English relatives advised him to go to Britain.
In February 1896 he arrived in London where the British Post Office provided him with facilities to continue his research.
</textarea><br>
<input type="button" value="Import Text" class="but" onclick="subImport();">
<div id="divMain" class="m"></div>
</body>
</html>
答案 0 :(得分：0)
您的问题是warr数组。单击“导入文本”按钮后，文本中的单词将被推送到warr，但如果warr中已有单词，则不会删除它们。每当调用subit.importText时，您必须重置this.importText = function(txt) {
this.warr = [];
// ...
}
：
var ss = null;
function subImport() {
ss.importText(document.getElementById("textBox").value);
}
function doit() {
document.getElementById("divStat").style.visibility = "hidden";
divMain = document.getElementById("divMain");
ss = new subit(divMain);
}
doit(); // instead of <body onload="doit();">
function stat(s) {
statDiv = document.getElementById("divStat");
statDiv.innerHTML += s + "<br>";
statDiv.scrollTop = statDiv.scrollHeight;
}
function subit(divMain) {
bigThis = this;
this.divMain = divMain;
// some color constants
nbg = "#EFF";
hbg = "orange";
sbg = "#AFA";
cbg = "#AAF";
// the main word object array
this.warr = [];
this.importText = function(txt) {
this.warr = []; // Was missing!
while (this.divMain.firstChild)
// using innerHTML would be fine too!
this.divMain.removeChild(this.divMain.firstChild);
var parts = txt.split(" ");
for (i = 0; i < parts.length; i++) {
// why not use this.warr.push() ?
this.warr[this.warr.length] = new word(i, parts[i], this.divMain);
}
}
function word(id, txt, container) {
this.txt = txt;
this.id = id;
this.div = document.createElement('div');
this.div.innerHTML = this.txt; // + " "
this.div.className = "d";
this.div.setAttribute("id", "d" + this.id);
divMain.appendChild(this.div);
this.timestamp = 0;
this.isLastSelected = false;
this.isSelected = false;
this.steppedOn = false;
this.div.onclick = function() {
thisId = parseInt(this.id.substr(1));
bigThis.warr[thisId].gotClicked();
}
}
word.prototype.gotClicked = function() {
gLastSel = -1;
// Here is no problem!
if (!this.isSelected) {
this.isSelected = true;
this.isLastSelected = true;
gLastSel = this.id;
} else {
this.isSelected = false;
this.isLastSelected = false;
gLastSel = -1;
}
this.setBG();
// now we check the others ...
var nowLastSel = -1;
for (i = 0; i < bigThis.warr.length; i++) {
if (bigThis.warr[i].id != this.id && bigThis.warr[i].isSelected) {
if (!event.ctrlKey && this.isSelected) {
bigThis.warr[i].isSelected = false;
bigThis.warr[i].isLastSelected = false;
} else {
if (bigThis.warr[i].isLastSelected) {
if (gLastSel == -1) gLastSel = i;
else bigThis.warr[i].isLastSelected = false;
}
nowLastSel = i;
}
}
bigThis.warr[i].setBG();
}
if (gLastSel == -1) gLastSel = nowLastSel;
if (gLastSel != -1) {
bigThis.warr[gLastSel].isLastSelected = true;
bigThis.warr[gLastSel].setBG();
}
}
word.prototype.stepOn = function(ts) {
if (wordCurStep != -1)
bigThis.warr[wordCurStep].stepOff();
this.timestamp = ts;
this.steppedOn = true;
wordCurStep = this.id;
this.setBG();
}
word.prototype.stepOff = function() {
this.steppedOn = false;
this.setBG();
wordCurStep = -1;
}
word.prototype.setBG = function() {
var bgcol = nbg;
if (this.steppedOn) {
bgcol = hbg;
} else {
if (this.isSelected)
bgcol = this.isLastSelected ? cbg : sbg;
}
this.div.style.backgroundColor = bgcol;
}
word.prototype.getText = function() {
return (this.txt);
}
word.prototype.setStamp = function(stamp) {
this.stamp = stamp;
}
word.prototype.getStamp = function() {
return (this.stamp);
}
}
body {
font-family: tahoma;
font-size: 12pt;
}
.t {
width: 800px;
height: 300px;
background-color: #FFF;
border: solid 1px #CCF;
}
.m {
width: 800px;
height: 300px;
background-color: #EFF;
border: solid 1px #CCF;
}
.d {
float: left;
border-right: solid 1px #CCF;
border-bottom: solid 1px #CCF;
padding-left: 2px;
padding-right: 2px;
}
.but {
width: 100px;
}1. Paste Text Here:
<br>
<textarea id="textBox" class="t" rows="10">
Marconi was born in Bologna in 1874. From 1890 to 1893, he studied physics at the technical school in Livorno. In 1894 he started experimenting with radio waves and discovered how to transmit them over short distances. Unfortunately he did not receive
much encouragement in Italy and his English relatives advised him to go to Britain. In February 1896 he arrived in London where the British Post Office provided him with facilities to continue his research.
</textarea>
<br>
<input type="button" value="Import Text" class="but" onclick="subImport();">
<div id="divMain" class="m"></div>
<!-- id=divStat needed so no error is encountered -->
<div id="divStat">Hidden!</div>Node