What is wrong with my code, I checked it with an online jslint and it says spell_img is used before being declared?
spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
myforms = document.forms;
for( i=0;i < myforms.length; i++ )
{
textareas = myforms[i].getElementsById('textarea');
for( y=0; y < textareas.length; y++ )
{
spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}
Step 1: declare variables. In JavaScript, this is done using var. var scopes the variable to the scope where the var was found; scopes in JavaScript are (currently) function-based.
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
var myforms = document.forms;
for( var i=0;i < myforms.length; i++ )
{
var textareas = myforms[i].getElementsById('textarea');
for( var y=0; y < textareas.length; y++ )
{
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}
Step 2: getElementsById is not a thing that exists. It’s getElementsByTagName.
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
var myforms = document.forms;
for( var i = 0; i < myforms.length; i++ )
{
var textareas = myforms[i].getElementsByTagName('textarea');
for( var y = 0; y < textareas.length; y++ )
{
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}
Step 3: wait, why are you even getting forms first?
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
for(var i = 0; i < textareas.length; i++) {
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
Step 4: javascript: URIs are bad. Inline JavaScript is bad. Inline JavaScript in inline URL in JavaScript? That’s really bad and is kind of like eval and all sorts of things. Create a function and make spellCheck accept an element object, not form index, yuck. title is a property as well as an attribute (like src), by the way:
var forEach = Array.prototype.forEach;
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.title = _lang_spellcheck;
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
forEach.call(textareas, function(textarea) {
var spellLink = document.createElement('a');
spellLink.href = "#";
spellLink.addEventListener("click", function(e) {
e.preventDefault();
spellCheck(textarea);
}, false);
spellLink.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(spelllink, textareas[y].nextSibling);
});
}
If you need to be compatible with old IE without shivs, that’s doable:
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.title = _lang_spellcheck;
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
for (var i = 0; i < textareas.length; i++) {
(function(textarea) {
var spellLink = document.createElement('a');
spellLink.href = "#";
spellLink.onclick = function() {
spellCheck(textarea);
return false;
};
spellLink.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(spelllink, textareas[y].nextSibling);
})(textareas[i]);
});
}
You can really put the cherry on top with some event delegation.
function addSpellLink(textarea) {
var link = document.createElement("a");
link.className = "spell-link";
link.href = "#";
link.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(link, textarea.nextSibling);
}
function findTextboxes() {
Array.prototype.forEach.call(document.getElementsByTagName("textarea"), addSpellLink);
}
document.addEventListener("click", function(e) {
if (e.target.classList.contains("spell-link")) {
e.preventDefault();
spellCheck(e.previousElementSibling);
}
}, false);
var spell_img = new Image();//place any one of these right at the top of your scope.
or
window.spell_img = new Image();//replace first line
Related
I have a dynamically created table and I need to retrieve the values from that to be stored in a multidimensional array as shown below
But I am getting an exception/error saying "Cannot set property of 0 to undefined"
My JS Function:
var DefAttrArray = new Array(100);
function storeDefinedStreamInfo(newAgent,i,e,ui)
{
var StrName= document.getElementById("StreamNameInput").value;
var StreamElementID = i;
var table = document.getElementById('attrtable');
var tblerows = (table.rows.length)-1;
// DefAttrArray[i] = new Array(3);
// for (var w=3; w<3; w++)
// {
// DefAttrArray[q][w] = new Array(tblerows);
// }
for (r = 1; r < table.rows.length; r++) {
for(var c=0; c<1;c++) {
var attrNm = table.rows[r].cells[c].innerHTML;
var attrTp = table.rows[r].cells[1].innerHTML;
createdDefinedStreamArray[i-1][2][r-1]= new Array(2);
createdDefinedStreamArray[i-1][2][r-1][0]=attrNm;
createdDefinedStreamArray[i-1][2][r-1][1]=attrTp;
alert(createdDefinedStreamArray[i-1][2][r-1][0] + "\n" + createdDefinedStreamArray[i-1][2][r-1][1]);
}
}
createdDefinedStreamArray[i-1][0]=StreamElementID;
createdDefinedStreamArray[i-1][1]=StrName;
createdDefinedStreamArray[i-1][2]=new Array(tblerows);
createdDefinedStreamArray[i-1][3]="Defined Stream";
alert("createdDefinedStreamArray[i-1][2][w][0] : "+ createdDefinedStreamArray[i-1][2][w][0]);
var prop = $('<a class="streamproperty" onclick="doclickExp(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
dropCompleteElement(newAgent,e,ui);
}
Finally, got it to work.
var DefAttrArray = new Array(100);
function storeDefinedStreamInfo(newAgent,i,e,ui)
{
var StrName= document.getElementById("StreamNameInput").value;
var StreamElementID = i;
var table = document.getElementById('attrtable');
var tblerows = (table.rows.length)-1;
createdDefinedStreamArray[i][2]=new Array(tblerows);
for (r = 1; r < table.rows.length; r++) {
for(var c=0; c<1;c++) {
var attrNm = table.rows[r].cells[c].innerHTML;
var attrTp = table.rows[r].cells[1].innerHTML;
createdDefinedStreamArray[i][2][r-1]= new Array(2);
createdDefinedStreamArray[i][2][r-1][0]=attrNm;
createdDefinedStreamArray[i][2][r-1][1]=attrTp;
}
}
createdDefinedStreamArray[i][0]=StreamElementID;
createdDefinedStreamArray[i][1]=StrName;
createdDefinedStreamArray[i][3]="Defined Stream";
createdDefinedStreamArray[i][4]= tblerows;
var prop = $('<a class="streamproperty" onclick="doclickDefine(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
dropCompleteElement(newAgent,e,ui);
}
Line 35, just before the alert, returns -1. I also tried $(this).index() with the same result. Here is what it should do: Clicking EN.gif should return 4, then grand_array_pics[4] should give me en_array_pics and load the .gifs in that array.
$(document).ready(function () {
var main_pics = ["AN.gif", "BN.gif", "CN.gif", "DN.gif", "EN.gif", "GN.gif"];
var starting_pics = ["AN.gif", "CN.gif", "EN.gif"];
var an_array_pics = ["BN.gif", "EN.gif", "GN.gif", "AN.gif","DN.gif"];
var bn_array_pics = ["CN.gif", "DN.gif", "GN.gif"];
var cn_array_pics = ["DN.gif", "GN.gif", "AN.gif", "CN.gif"];
var dn_array_pics = ["EN.gif", "AN.gif", "CN.gif"];
var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"];
var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];
var grand_array_pics = [
an_array_pics,
bn_array_pics,
cn_array_pics,
dn_array_pics,
en_array_pics,
gn_array_pics
];
var i = 0;
for (i = 0; i < starting_pics.length; i++) {
$("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
$("#main").on("click", ".pics", function () {
var j = $.inArray(this, main_pics);
alert(j);
$("#sidebar .pics").remove();
$(this).clone().appendTo("#train");
$(this).clone().appendTo("#sidebar");
$("#main .pics").remove();
var chosen_pics_array = grand_array_pics[j];
var count = chosen_pics_array.length;
var k = 0;
for (k = 0; k < count; k++) {
$("<img/>").attr("src", "images/" + chosen_pics_array[k]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
});
}); //end ready
this is the DOM <img> element, while main_pics is an array of strings. It will never be found inside there. Use
var j = $.inArray(this.src.split("/").pop(), main_pics);
Give this a try. You need to get the name of the file and you're passing the element itself into $.inArray
var j = $.inArray(this.src.substring(this.src.lastIndexOf('/')+1), main_pics);
I have added here 2 functions moveoutid() for creating img tag on click of button and it addes image src to img tag to show image on webpage. and moveinid() for removing selected image from img tag.
function moveoutid() {
var sda = document.getElementById('availableFruits');
var len = sda.length;
var sda1 = document.getElementById('orderFruits');
for (var j = 0; j < len; j++) {
if (sda[j].selected) {
alert(baseUrl + "/img/" + sda.options[j].value + ".jpg");
var img1 = document.createElement('img').src = baseUrl + "/img /" + sda.options[j].value + ".jpg";
var di = document.getElementById('d');
di.appendChild(img1);
var tmp = sda.options[j].text;
var tmp1 = sda.options[j].value;
sda.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp1;
try {
sda1.add(y, null);
} catch (ex) {
sda1.add(y);
}
}
}
}
function moveinid() {
var sda = document.getElementById('availableFruits');
var sda1 = document.getElementById('orderFruits');
var len = sda1.length;
for (var j = 0; j < len; j++) {
if (sda1[j].selected) {
di = document.getElementById('d');
img1.src = baseUrl + "/img/" + sda1.options[j].value + ".jpg";
//img.className="";
di.removeChild(img1);
var tmp = sda1.options[j].text;
var tmp1 = sda1.options[j].value;
sda1.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp;
try {
sda.add(y, null);
} catch (ex) {
sda.add(y);
}
}
}
}
I want to remove selected img tag from div (means which ever image selected by user in dropdown list that image should be remove.)
Instead of removing the tag it sounds like you just need to show and hide that image.
document.getElementById('Image').style.visibility='visible';
If I understood correctly. Or you could even destroy the element removing it from the DOM.
I am adding a row to a table, and attached an ondblclick event to the cells. The function addrow is working fine, and the dblclick is taking me to seltogg, with the correct parameters. However, the var selbutton = document.getElementById in seltogg is returning a null. When I call seltogg with a dblclick on the original table in the document, it runs fine. All the parameters "selna" have alphabetic values, with no spaces, special characters, etc. Can someone tell me why seltogg is unable to correctly perform the document.getElementById when I pass the id from addrow; also how to fix the problem.
function addrow(jtop, sel4list, ron4list) {
var tablex = document.getElementById('thetable');
var initcount = document.getElementById('numrows').value;
var sel4arr = sel4list.split(",");
var idcount = parseInt(initcount) + 1;
var rowx = tablex.insertRow(1);
var jtop1 = jtop - 1;
for (j = 0; j <= jtop1; j++) {
var cellx = rowx.insertCell(j);
cellx.style.border = "1px solid blue";
var inputx = document.createElement("input");
inputx.type = "text";
inputx.ondblclick = (function() {
var curj = j;
var selna = sel4arr[curj + 2];
var cellj = parseInt(curj) + 3;
inputx.id = "cell_" + idcount + "_" + cellj;
var b = "cell_" + idcount + "_" + cellj;
return function() {
seltogg(selna, b);
}
})();
cellx.appendChild(inputx);
} //end j loop
var rowCount = tablex.rows.length;
document.getElementById('numrows').value = rowCount - 1; //dont count header
} //end function addrow
function seltogg(selna, cellid) {
if (selna == "none") {
return;
}
document.getElementById('x').value = cellid; //setting up for the next function
var selbutton = document.getElementById(selna); //*****this is returning null
if (selbutton.style.display != 'none') { //if it's on
selbutton.style.display = 'none';
} //turn it off
else { //if it's off
selbutton.style.display = '';
} //turn it on
} //end of function seltogg
You try, writing this sentence:
document.getElementById("numrows").value on document.getElementById('numrows').value
This is my part the my code:
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
Look you have to use this " y not '.
TRY!!!!
I'm trying to change the url's and words using greasemonkey
Example :
www.rapid*share.com
www.*Forbidden*
*Forbidden*
i want change word's
rapid*share to rapidshare
*forbidden * to mediafire.com
*forbidden * to narutopedia
userscript:
var words = {
"rapid*share":"rapidshare",
"*Forbidden*":"www.mediafire.com",
"*Forbidden*":"narutopedia",
"":""};
// read
String.prototype.prepareRegex = function() {
return this.replace(/([\[\]\^\&\$\.\(\)\?\/\\\+\{\}\|])/g, "\\$1");
};
// tag
function isOkTag(tag) {
return (new RegExp("(," + tag + ",) | (," + tag + "$)", "g").test(",pre,blockquote,code,input,button,textarea")) == false;
}
// convert word
var regexs=new Array(),
replacements=new Array();
for(var word in words) {
if(word != "") {
regexs.push(new RegExp(word.prepareRegex().replace(/(\\)?\*/g, function(e) {return ((e !== "\\*") ? "[^ ]*" : "*");}), "gi"));
replacements.push(words[word]);
}
}
//
var texts = document.evaluate(".//text()[normalize-space(.)!='']",document.body,null,6,null), text="", len=regexs.length;
for(var i=0,l=texts.snapshotLength; (this_text=texts.snapshotItem(i)); i++) {
if(isOkTag(this_text.parentNode.tagName) && (text=this_text.textContent)) {
for(var x=0; x<len; x++) text = this_text.textContent = text.replace(regexs[x], replacements[x]);
}
}
//replace url or link
var links = document.links;
var link;
for(var i=links.length-1; i >=0; i--){
link = links[i];
link.href = link.href.replace("http://www.rapid*share.com", 'http://www.rapidshare.com');
link.href = link.href.replace("http://www.zid*du.com", 'http://www.ziddu.com');
}
output, change only word but not url, and forbidden all change to narutopedia.
www.rapidshare.com
narutopedia
<!-- text -->
narutopedia
jsfiddle here
any solution?
thanks
Solution For Change Url
var url1,url2;
url1 = ['www.youtube.com','youtube.com', 'www.video.google.com', 'video.google.com', 'adbanner', 'advertisement', 'adserver', 'doubleclick'];
url2 = ['208.65.153.242','208.65.153.242', 'video.l.google.com', 'video.l.google.com', ' ', ' ',' ',' ' ];
var a, links;
var tmp="a";
var p,q;
links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
a = links[i];
for(var j=0;j<url1.length; j++)
{
tmp = a.href+"" ;
if(tmp.indexOf(url1[j]) != -1)
{
p=tmp.indexOf(url1[j]) ;
q="http://";
q = q + url2[j] + tmp.substring(p+url1[j].length,tmp.length);
a.href=q ;
}
}
}
Change the lines
link.href = link.href.replace("http://www.rapid*share.com", 'http://www.rapidshare.com');
link.href = link.href.replace("http://www.zid*du.com", 'http://www.ziddu.com');
to
link.href = link.href.replace("http://www.rapid%2Ashare.com", 'http://www.rapidshare.com');
link.href = link.href.replace("http://www.zid%2Adu.com", 'http://www.ziddu.com');