Odd error from script in header

[SBlueman]

This script which is in my header include template is this:

<script type="text/javascript">

Array.prototype.contains = function (ele) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == ele) {
            return true;
        }
    }
    return false;
};

Array.prototype.remove = function (ele) {
    var arr = new Array();
    var count = 0;
    for (var i = 0; i < this.length; i++) {
        if (this[i] != ele) {
            arr[count] = this[i];
            count++;
        }
    }
    return arr;
};

window.onload = function () {
        var taglist = document.getElementById('tags');
	taglist.value = taglist.value.replace (/\s+/g,'');  // strip space
        var tags = taglist.value.split(',');
        
        var populartags = document.getElementById('popularTags').getElementsByTagName('span');
        
        for (var i = 0; i < populartags.length; i++) {
            if (tags.contains(populartags[i].innerHTML)) {
                populartags[i].className = 'selected';
            }
        }
}

function doTag(ele) {
    var thisTag = ele.innerHTML;
    var taglist = document.getElementById('tags');
    var tags = taglist.value.split(',');
 
    // If tag is already listed, remove it
    if (tags.contains(thisTag)) {
        tags = tags.remove(thisTag);
        ele.className = 'unselected';
        
    // Otherwise add it
    } else {
        tags.splice(tags.length-1, 0, thisTag);
        ele.className = 'selected';
    }
    
    taglist.value = tags.join(',');
    document.getElementById('tags').focus();
}
</script>

I have to have this code because it is key to critical feature on the site. Unfortunately it seems to be causing some issues to my message editor. When I go to select a font or font size, I am getting this odd link at the bottom of my font drop-down:



I am also getting an error with the font size drop-down menu:


Is there a way to isolate the script and have it called from somewhere else other than the template and would this fix the template error I am experiencing?

Also....and I don't know if this is related.....

I am getting this error when selecting threads:



I have two checked.....and the counter says four. I uncheck them, and the number changes. It's acting all squirrelly.

[Lynne]

Where in the headinclude template did you add that code? I just added it to mine with no problem... the page is just fine for me.

[SBlueman]

I added it at the very end of my headinclude template.

--------------- Added [DATE]1288550490[/DATE] at [TIME]1288550490[/TIME] ---------------

BTW, it also seems like I can't seem to use the advanced WYSIWYG editor without issues either.

[kh99]

I think the problem is that the javascript code that builds the color and font menus (in clientscript/vbulletin_textedit.js) uses for...in loops to add the items, and that kind of loop gets all properties of an object, including anything added to the prototype. (As explained here: http://www.prototypejs.org/api/array).

So maybe the easiest thing to do is to change that JS code that you've added. It wouldn't be that hard to move the "contains" and "remove" code in to the code below where they're called (assuming of course that there isn't any more JS code on that page that relies on those functions).

[SBlueman]

The script is for this modification:

https://vborg.vbsupport.ru/showthread.php?t=159646

I use it to create pre-defined topic tags that members can click once on to select. The problem is that this code was setup by a former member of the site who we have lost touch with.

[kh99]

OK, I haven't tried it at all, but maybe try this code instead of what you originally posted:

<script type="text/javascript">

function contains(a, ele) {
    for (var i = 0; i < a.length; i++) {
        if (a[i] == ele) {
            return true;
        }
    }
    return false;
};

function remove(a, ele) {
    var arr = new Array();
    var count = 0;
    for (var i = 0; i < a.length; i++) {
        if (a[i] != ele) {
            arr[count] = a[i];
            count++;
        }
    }
    return arr;
};

window.onload = function () {
        var taglist = document.getElementById('tags');
	taglist.value = taglist.value.replace (/\s+/g,'');  // strip space
        var tags = taglist.value.split(',');
        
        var populartags = document.getElementById('popularTags').getElementsByTagName('span');
        
        for (var i = 0; i < populartags.length; i++) {
            if (contains(tags, populartags[i].innerHTML)) {
                populartags[i].className = 'selected';
            }
        }
}

function doTag(ele) {
    var thisTag = ele.innerHTML;
    var taglist = document.getElementById('tags');
    var tags = taglist.value.split(',');
 
    // If tag is already listed, remove it
    if (contains(tags, thisTag)) {
        tags = remove(tags, thisTag);
        ele.className = 'unselected';
        
    // Otherwise add it
    } else {
        tags.splice(tags.length-1, 0, thisTag);
        ele.className = 'selected';
    }
    
    taglist.value = tags.join(',');
    document.getElementById('tags').focus();
}
</script>

[SBlueman]

That fixed all the issues I was having with this modification. Thank you so much!

What was the change that you made and why? I'd love to know to learn.

[kh99]

Well the "Array.prototype.contains = function (ele)..." from the original code adds a function to the javascript 'Array' class so that later you can do something like

PHP Code:

var x = new Array();
...
if (x.contains('foo'))
{ 


to check if the array contains the value 'foo'. But adding the functions to the class was causing the problem because of the use of for..in loops by the code that builds the editor menus (see the link I posted above). So I changed it to

PHP Code:

function contains(a, ele)...

var x = new Array();
...
if (contains(x, 'foo'))
{ 


which does the same thing by adding a parameter to a normal function instead of adding a function to the class.

Hopefully this makes some sense.

[SBlueman]

Looks like it's time for me to learn some things about java. Thank you for pointing me in the right direction.

[Lynne]

First thing to learn is that java and javascript are NOT the same language. (I just don't want you to get a book about java when what you really want is a book about javascript. )