连接javascript错误 - 可能很容易修复

Question

我正在尝试做下一件事：

getChatListMessageString: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
            var rowClass = this.DOMbufferRowClass,
                userClass = this.getRoleClass(userRole),
                colon = ': ';
            if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) {
                userClass += ' action';
                colon = ' ';
            }
            if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) {
                rowClass += ' private';
            }

            var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                            + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
            return  '<div id="'
                    + this.getMessageDocumentID(messageID)
                    + '" class="'
                    + rowClass
                    + '">'
                    + this.getDeletionLink(messageID, userID, userRole, channelID)
                    + dateTime

                    //start of the code i added

                    + '<a href="http://hostname.x/report_chat.php?usernameR='
                    + userName
                    + '/&useridR='
                    + userID
                    + '">'
                    + '<img src="img/excl.png"></img></a>'

                    // end of the code i added
                    + '<a href="http://www.hostname.x/'
                    + userID
                    + '" target="_blank"'
                    + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                    + ' dir="'
                    + this.baseDirection
                    + '" onclick="ajaxChat.insertText(this.firstChild.nodeValue);">'
                    + userName
                    + '</a>'
                    + colon
                    + this.replaceText(messageText)
                    + '</div>';
        },

如果我删除我添加的部分，页面工作正常。 当我将其添加回来时，我收到了Aw Snap错误（缓存重新加载 - >隐身模式）

我是javascript的新手，所以我无法真正告诉我做错了什么。

谢谢！

编辑：无论出于何种原因，AW SNAP ERROR来自<img>标签。

Answer 1

哎哟! 最好的方法是不首先以这种方式构建HTML元素，并使用DOM构建并将它们注入到文档中。

这使代码MUCH更易于阅读和修改，并完全消除了连接问题。

现在，如果您有错误，您可以专注于您分配给属性的值而不是HTML的语法。

// Create the div element in memeory
var div = document.createElement("div");

// Configure the attributes of that div
div.id = this.getMessageDocumentID(messageID);
div.classList.add(rowClass);

// Now, begin populating the div
div.innerHTML = this.getDeletionLink(messageID, userID, userRole, channelID) + dateTime;

// A new element belongs inside the div. Repeat the process:
var a1 = document.createElement(a);
a1.href = "http://hostname.x/report_chat.php?usernameR=" + userName + "/&useridR=" + userID;

var img = document.createElement("img");
img.src = "img/excl.png";

// Place the image into the anchor
a1.appendChild(img);

// Place the anchor into the div
div.appendChild(a1);

// Another anchor is now needed
var a2 = document.createElement(a);
a2.href = "http://www.hostname.x/" + userID;
a2.target = "_blank";

// It is unclear what the following line is based on the fact that whatever it returns, you have that 
// being inserted where attributes go. It is commented here for that reason.
//this.getChatListUserNameTitle(userID, userName, userRole, ip) + " dir='" + this.baseDirection;

// Set up event handler for the anchor
a2.addEventListener("click", function(){
  ajaxChat.insertText(this.firstChild.nodeValue);
});

// Populate the anchor
a2.innerHTML = userName;

// Insert this anchor into the div
div.appendChild(a2);

// Insert the final contents into the div
div.innerHTML += colon + this.replaceText(messageText);

// Return the final construct
return div;

Answer 2

 //Here a simple test var Obj = (function(){ return{ DOMbufferRowClass : 'DOMbufferRowClass', getRoleClass : function() { return 'roleClass'; }, settings : '', getMessageDocumentID : function(){ return '123'; }, getDeletionLink : function(messageID, userID, userRole, channelID) { return 'DeletiongLink' }, replaceText : function() { }, getChatListMessageString : function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) { var rowClass = this.DOMbufferRowClass, userClass = this.getRoleClass(userRole), colon = ': '; if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) { userClass += ' action'; colon = ' '; } if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) { rowClass += ' private'; } var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">' + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : ''; return `<div id="${this.getMessageDocumentID(messageID)}" class="${rowClass}"> ${this.getDeletionLink(messageID, userID, userRole, channelID)} ${dateTime} <a href="http://hostname.x/report_chat.php?usernameR='${userName}/&useridR=${userID}"> <img src="img/excl.png"/></a><a href="http://www.hostname.x/${userID} target="_blank" this.getChatListUserNameTitle(userID, userName, userRole, ip) dir="{this.baseDirection} onclick="ajaxChat.insertText(this.firstChild.nodeValue);">${userName}</a>${colon}${this.replaceText(messageText)}</div>`; } }; })(); console.log(Obj.getChatListMessageString("05102017", '1234',"admin", '456', 'Test','11', '127.0.0.1')); 

我会使用模板文字简化代码并避免所有连接混乱。

getChatListMessageString : function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
   var rowClass = this.DOMbufferRowClass,
       userClass = this.getRoleClass(userRole),
       colon = ': ';
       if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) {
            userClass += ' action';
                colon = ' ';
       }
       if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) {
                rowClass += ' private';
       }

      var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                            + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
            return  `<div id="${this.getMessageDocumentID(messageID)}" class="${rowClass}">
                     ${this.getDeletionLink(messageID, userID, userRole, channelID)}  ${dateTime}
                     <a href="http://hostname.x/report_chat.php?usernameR='${userName}/&useridR=${userID}">
                     <img src="img/excl.png"/></a><a href="http://www.hostname.x/${userID} target="_blank"
                      this.getChatListUserNameTitle(userID, userName, userRole, ip) dir="{this.baseDirection}

        onclick="ajaxChat.insertText(this.firstChild.nodeValue);">${userName}</a>${colon}${this.replaceText(messageText)}</div>`;
  }