Question

我在使用这段代码时遇到了麻烦。当我点击它一次，一切都很好，行为是按照设计的，但当我不止一次点击它，然后有一堆HTML出现在div（文本区域）。我应该如何修改我的JS以使其不会发生？

HTML：

<div id="transcriptText">Lorem ipsum dolor sit amet </div>
<br>
<div id="divideTranscript" class="button">&nbsp;Transform the Transcript!&nbsp;</div>

JS：

    window.onload = function() {

var transcriptText = document.getElementById("transcriptText");
var newTranscript = document.createElement("div");
var divideTranscript = document.getElementById("divideTranscript");
divideTranscript.onclick = EventHandler;

function EventHandler() {
    changeText();
}

function changeText() {
    var sArr = transcriptText.innerHTML.split(" ");
    transcriptText.innerHTML = "";
    console.log(sArr);
    var count = 0;

    for (var i = 0; i < sArr.length; i++) {
        var item = sArr[i];
        var newSpan = document.createElement("span");
        var newText = document.createTextNode(item);
        var dotNode = document.createTextNode(" ");

        newSpan.id = "word" + i;
        var mouseOverFunction = function () {
            this.style.backgroundColor = 'yellow';
        };
        newSpan.onmouseover = mouseOverFunction;

        var mouseOutFunction = function () {
            this.style.backgroundColor = '';
        };
        newSpan.onmouseout = mouseOutFunction;
        newSpan.appendChild(newText);
        newSpan.appendChild(dotNode);
        transcriptText.appendChild(newSpan);
        count++;
    };
}
};

这是现场http://jsfiddle.net/b94DG/1/

Answer 1

主要问题是您每次都使用innerHTML属性而不是.textContent属性。

以下是changeText()的改进版本，与您运行它的次数无关：

function changeText() {
    var sArr = transcriptText.textContent.split(/\s+/g); // changed
    transcriptText.innerHTML = "";
    var count = 0;

    for (var i = 0; i < sArr.length; i++) {
        var item = sArr[i];
        if (!item) continue; // changed: don't add spans for empty strings
        var newSpan = document.createElement("span");
        var newText = document.createTextNode(item);
        var dotNode = document.createTextNode(" ");

        newSpan.id = "word" + i;
        var mouseOverFunction = function () {
            this.style.backgroundColor = 'yellow'; 
        };
        newSpan.onmouseover = mouseOverFunction;

        var mouseOutFunction = function () {
            this.style.backgroundColor = '';
        };
        newSpan.onmouseout = mouseOutFunction;
        newSpan.appendChild(newText);
        newSpan.appendChild(dotNode);
        transcriptText.appendChild(newSpan);
        count++;
    };
}

如何在页面上删除不需要的HTML标记？

1 个答案: