I have some simple functions in javascript which work fine in most browser except IE9. I have heard Ie9 is fussy about commas etc. But I cannot spot any obvious problems. Can anyone of you guys and gals shed any light? Full code below
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", load, false);
function load() {
//dom loaded
var elUserId = document.getElementById("user_id");
var elPasswordId = document.getElementById("password");
var elLoginMsg = document.getElementById("usernameMsg");
var elPasswordMsg = document.getElementById("passwordMsg");
var elIncreaseFontSize = document.getElementById("increaseFont");
var elResetFontSize = document.getElementById("resetFont");
var elChangeContrast = document.getElementById("changeContrast");
var elResetContrast = document.getElementById("resetContrast");
var logInbox = document.getElementById("loginBox");
var helpWithBB = document.getElementById("helpWithBB");
var fontUp = '135%';
var fontReset = '100%';
var black = '#000000';
var white = '#ffffff';
var divReset ='415px';
var divChange ='525px';
var txtSizeChange ='40.5em';
var txtReset ='42em';
elLoginMsg.style.display ='none';
elPasswordMsg.style.display = 'none';
elPasswordId.addEventListener("focus", function(){
showText(elPasswordMsg);
}, false);
elUserId.addEventListener("click", function(){
showText(elLoginMsg);
}, false);
elResetFontSize.addEventListener("click", function(){
//pass size change and element affected to be manipulated
//resetTextSize(fontReset,logInbox,elPasswordMsg);
changeTextSize(fontReset,logInbox,elPasswordMsg,divReset,txtReset);
});
elChangeContrast.addEventListener("click", function(){
//pass size change and element affected to be manipulated
changeContrast(logInbox, helpWithBB, black, white);
});
elResetContrast.addEventListener("click", function(){
document.location.reload(true);
});
elIncreaseFontSize.addEventListener("click", function(){
//pass size change and element affected to be manipulated
changeTextSize(fontUp,logInbox,elPasswordMsg,divChange,txtSizeChange);
});
function changeContrast(mainDiv, secDiv, txtColor, bkColor){
secDiv.style.background = bkColor;
mainDiv.style.background = bkColor;
showText(elPasswordMsg);
showText(elLoginMsg);
elLoginMsg.style.color = txtColor;
elPasswordMsg.style.color = txtColor;
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
anchors[i].style.color = txtColor;
}
var para = document.getElementsByTagName('p');
for(var i = 0; i < anchors.length; i++) {
para[i].style.color = txtColor;
}
}
function changeTextSize(fontUp, elDiv, msg, divH, msgT){
document.body.style.fontSize=fontUp;
elDiv.style.height = divH;
msg.style.top = msgT;
}
function showText(id){
id.style.display ='block';
}
}
</script>
You're missing the third parameter (useCapture) in some of your calls to addEventListener() but other than that nothing is obviously wrong. I know that Firefox has only started supporting addEventListener() without a third parameter within the last year, so it's possible IE 9 doesn't support it.
Update
So much for that theory. Two parameters seems fine in IE 9: http://jsfiddle.net/xZRy7/
Related
I'm working on my first school project so I don't have much experience in doing such web applications, that's why I decided to ask here.
How can I update the value in the for loop syntax or reset it entirely, so it iterates again, like I just reloaded it? I have another function that I decided not to show, simply because it would be useless to. What it does in the end is increments the taskCount.length by one. This part technically works but problem is, the function I'm going to show you now, once iterated, will always keep the default taskCount.length value, once the page is loaded, it never changes there. Is there any way I can update it?
Here's an example: The function above makes taskCount.length = '5' but when the page started it was taskCount.length = 4, and when I do alert(taskCount.length) from the console, I get 5. But the for loop doesn't want to change.
for (var i = 0; i < taskCount.length; i++) {
document.getElementsByClassName('task')[i].addEventListener('click', ((j) => {
return function() {
var shadow = document.createElement('div');
// Styling
var changingWindow = document.createElement('div');
// Styling
var changingTitle = document.createElement('p');
// Styling
var changingText = document.createElement('p');
// Styling
var changingTitleNode = document.createTextNode('Промяна');
var changingTextNode = document.createTextNode('Моля, изберете действие.');
var deleteTask = document.createElement('button');
var goUp = document.createElement('button');
var goDown = document.createElement('button');
var unchange = document.createElement('button');
// Styling
var deleteElementNode = document.createTextNode('Премахни задачата');
var goUpNode = document.createTextNode('Премести нагоре');
var goDownNode = document.createTextNode('Премести надолу');
var unchangeNode = document.createTextNode('Отказ');
var justBreak = document.createElement('br');
var justBreakAgain = document.createElement('br');
var justBreakOneMoreTime = document.createElement('br');
body.appendChild(shadow);
shadow.appendChild(changingWindow);
changingWindow.appendChild(changingTitle);
changingTitle.appendChild(changingTitleNode);
changingWindow.appendChild(changingText);
changingText.appendChild(changingTextNode);
changingWindow.appendChild(deleteTask);
deleteTask.appendChild(deleteElementNode);
deleteTask.onclick = function() {
document.getElementsByClassName('task')[j].parentNode.removeChild(document.getElementsByClassName('task')[j]);
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreak);
changingWindow.appendChild(goUp);
goUp.appendChild(goUpNode);
goUp.onclick = function() {
if (j !== 0) {
var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
var savePreviousTaskValue = document.getElementsByClassName('task')[j - 1].innerHTML;
document.getElementsByClassName('task')[j].innerHTML = savePreviousTaskValue;
document.getElementsByClassName('task')[j - 1].innerHTML = saveThisTaskValue;
}
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreakAgain);
changingWindow.appendChild(goDown);
goDown.appendChild(goDownNode);
goDown.onclick = function() {
if (j !== document.getElementsByClassName('task').length - 1) {
var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
var saveNextTaskValue = document.getElementsByClassName('task')[j + 1].innerHTML;
document.getElementsByClassName('task')[j].innerHTML = saveNextTaskValue;
document.getElementsByClassName('task')[j + 1].innerHTML = saveThisTaskValue;
}
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreakOneMoreTime);
changingWindow.appendChild(unchange);
unchange.appendChild(unchangeNode);
unchange.onclick = function() {
shadow.parentNode.removeChild(shadow);
}
}
})(i))
}
As a matter of the page reloading, you can always save the value as a cookie and reuse it again and again. You can update it whenever you want.
I don't fully understand you question, but maybe some recursion is what you need. Something along the lines of:
loop(5);
function loop(xTimes) {
for (var i = 0; i < xTimes; i++) {
if (newXTimes !== xTimes) {
loop(newXtimes);
break;
}
}
}
Maybe set newxTimes as a global variable that can be accessed inside loop.
In case someone "from the future" reads this question and it doesn't have any answers, I came up with the solution to reload the page everytime you change the value. Still, I'd like to do it without reloading.
Why does my banner doesn't change her background? Please help me.
When I run the file the console tells me:
Uncaught TypeError: flechedroite.addEventListener is not a function
I really don't understand. I'm a beginner in Javascript so please explain me with kind words how I can fix this error :)
var flechedroite = document.getElementsByClassName('fa-arrow-right');
var flechegauche = document.getElementsByClassName('switch-left');
var banner = document.getElementById('banner');
var images = [];
var changeBackground = function (bElement, bUrl) {
return bElement.style.backgroundImage = "url(" + bUrl + ")";
}
//image list
images[0] = 'images/image1.jpg';
images[1] = 'images/image2.jpg';
images[2] = 'images/image3.jpg';
flechedroite.addEventListener('click', function() {
for (var i = 0; i < images.length; i++) {
changeBackground(document.body, images[i]);
}
})
addEventListener should be called in window.onload or in $(document).ready()
Since getElementsByClassName returns an array, you need to use array index with flechedroite to add an event listener. i.e. flechedroite[0].addEventListener('click', function() {...});
You are calling changeBackground function in a loop to set the background image, effectively you will see only the last image from the array being set as background.
JS Code
var images = [];
var changeBackground = function (bElement, bUrl) {
return bElement.style.backgroundImage = "url("+bUrl+")";
}
//image list
images[0] = 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg';
images[1] = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOGUhZo0Qe81U5qY_Z-seXgsD79LEEet832TVOlLMOEy10ZPsV';
images[2] = 'https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg';
window.onload = function(){
var flechedroite = document.getElementsByClassName('fa-arrow-right');
var flechegauche = document.getElementsByClassName('switch-left');
var banner = document.getElementById('banner');
var currentImageIndex = 0;
flechedroite[0].addEventListener('click', function() {
currentImageIndex = (currentImageIndex+1)%images.length;
changeBackground(document.body, images[currentImageIndex]);
})
}
The function getElementsByClassName returns a HTMLCollection, which is an array like structure that can contain multiple elements. So you need to use an index to access the elements contained in it.
So flechedroite.addEventListener results in an error but flechedroite[0].addEventListener should work
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
if you use 'getElementsByClassName' and you want to add an 'addEventListener', you can not do it in a 'generic' way: "flechedroite.addEventListener ('click', function () {}". You have to do this for each element:
var flechedroite = document.getElementsByClassName('fa fa-arrow-right');
//flechedroite contains all the elements that have the 'fa fa-arrow-right' classes
//on each element you have to add the "addEventListener"
for (var i = 0; i < flechedroite.length; i++) {
flechedroite[i].addEventListener('click', function() {
alert('flechedroite');
});
}
basic example JSFiddle1
a more advanced example
JSFiddle2
I use ImgLikeOpera and Squid Caching Proxy to manage my bandwidth while on dialup. But, I can't set it to load one image at a time, so I had the bright idea to write a script that will open each image on a page one at a time in a new tab and then close them so that they'll be saved in my cache.
Script works great, added a start button so that I could control when it started... but can't figure out how to make a stop button that will interrupt the process. I tried a bunch of stuff and nothing works...
It seems like when it's in the loop it can't hear what's going on outside the loop...
I have a feeling that there is a very simple way to do this, but I'm getting frustrated. Isn't this what break or return is supposed to be for?
Here's the relevant parts of my script:
var box = document.createElement ('div');
box.id = 'mySelectBox';
document.body.appendChild (box);
box.innerHTML = 'click>';
var searchButton = document.createElement ('div');
searchButton.className = 'mySearchButton';
searchButton.textContent = 'Search and open';
box.insertBefore (searchButton, box.nextSibling);
var stopButton = document.createElement ('div');
stopButton.className = 'myStopButton';
stopButton.textContent = 'Stop';
box.insertBefore (stopButton, box.nextSibling);
var mytable = document.getElementById ('lair-sort-pets').getElementsByTagName ('img');
var linksToOpen = [];
var mywin2 = null;
function openpics () {
for (var J = 0, L = mytable.length; J < L; J++) {
linksToOpen.push (mytable[J].src); //-- Add URL to list
}
openLinksInSequence ();
};
function openLinksInSequence () {
if (mywin2) {
mywin2.close ();
mywin2 = null;
}
if (linksToOpen.length) {
var link = linksToOpen.shift ();
mywin2 = window.open (link, "my_win2");
mywin2.addEventListener ('load', openLinksInSequence, false);
}
}
searchButton.addEventListener ('click', openpics, true);
//stopButton.addEventListener ('click', , true);
How do I make the stop button actually stop any more links from loading?
Use a global state variable. Like so:
var okayToOpenLinks = true;
searchButton.addEventListener ('click', openpics);
stopButton.addEventListener ('click', stopLinkSequence);
function openpics () {
okayToOpenLinks = true;
if (linksToOpen.length === 0) {
for (var J = 0, L = mytable.length; J < L; J++) {
linksToOpen.push (mytable[J].src); //-- Add URL to list
}
}
openLinksInSequence ();
};
function stopLinkSequence () {
okayToOpenLinks = false;
}
function openLinksInSequence () {
if (mywin2) {
mywin2.close ();
mywin2 = null;
}
if (okayToOpenLinks && linksToOpen.length) {
var link = linksToOpen.shift ();
mywin2 = window.open (link, "my_win2");
mywin2.addEventListener ('load', openLinksInSequence, false);
}
}
I am trying to write a click event for an anchor tag in my tampermonkey script.
var contentTag = document.getElementsByTagName("pre")[0];
var fileContents = contentTag.innerHTML;
contentTag.innerHTML = "";
var lines = fileContents.split("\n");
window.alert("Number of lines:"+lines.length);
for(var i=0; i<20; i++) {
if(i!==15)
contentTag.innerHTML+=(lines[i]+"<br>");
else {
contentTag.innerHTML+=("<a id=link1>Click me</a>");
var link = document.getElementById('link1');
link.addEventListener("click", function() {
window.alert('I am clicked');
}, false);
}
}
The alert message never gets triggered when I click on the link in the page dispalyed, even though I have a a click event listener defined. What am I doing wrong here?
It's the way you're adding HTML, you're reappending the link when you do this in the next iteration.
link.innerHTML += something
So the event handler is lost, and you can actually prove that by adding the event handler to the last element instead.
If you do it the proper way, creating elements and appending them, it works fine
var contentTag = document.getElementsByTagName("pre")[0];
var fileContents = contentTag.innerHTML;
contentTag.innerHTML = "";
var lines = fileContents.split("\n");
for (var i = 0; i < 20; i++) {
if (i !== 15) {
var txt = document.createTextNode(lines[i] || ''),
br = document.createElement('br');
contentTag.appendChild(txt);
contentTag.appendChild(br);
} else {
var link = document.createElement('a');
link.id = 'link1';
link.innerHTML = 'Click me';
link.addEventListener("click", function () {
alert('clicked')
}, false);
contentTag.appendChild(link)
}
}
FIDDLE
Shoud be contentTag.innerHTML+=("<a id='link1'>Click me</a>");
Try this:
<script>
var contentTag = document.getElementsByTagName("pre")[0];
var fileContents = contentTag.innerHTML;
contentTag.innerHTML = "";
var lines = fileContents.split("\n");
window.alert("Number of lines:"+lines.length);
for(var i=0; i<20; i++) {
if(i!==15)
contentTag.innerHTML+=(lines[i]+"<br>");
else {
contentTag.innerHTML+=("<a id=link"+i+">Click me</a>");
var link = document.getElementById('link'+i);
var att=document.createAttribute('onclick');
att.value="alert('Clicked !')";
link.setAttributeNode(att);
}
}
</script>
Demo: http://jsfiddle.net/TmJ38/
I have a function which removes all attributes in all tags except a few like colspan,color or align
When I send HTML code to this function it work well in Firefox and IE9, but in IE8 and IE7 it's finding lots of attributes which the elements don't have. For example, when I send:
jRemoveAtt("<button color=\"red\" id=\"start\">Hello World</button>")
It should find the color attribute and skip it, then find the id attribute and remove it.
But in IE8 it finds more attributes like onwrite, onunwrite, onpage, onbeforeactivate, and more.
This function is for clean up HTML and sending it to a printable newwindow. It's cleaning up really fast but in IE8 it takes 8-9 seconds and meanwhile makes the browser unresponsive.
I don't know how I can make it to ignore unwritten attributes in HTML strings. Any ideas?
Here is my function:
function jRemoveAtt(x){
if(!x)return '';
var str=$('<div>'+x+'</div>');
$('*',str).each(function(){
var c=$(this);
var attributes = $.map(this.attributes, function(item) {
var a=item.name.toLowerCase();
/*alert(a); */ //this alert shows the extra tags when activated
if (a!='align'&&a!='colspan'&&a!='span'&&a!='color'&&a!='size') {
c.removeAttr(item);
}
});
});
return $(str).html();
};
You can do this in pure JS.
HTML:
<div color="red" id="start" align="center">Hello World</div>
JS:
var test = document.getElementById("start");
purgeAttributes(test);
postAttributes(test);
function purgeAttributes(el)
{
//keep these attributes
var whitelist = ["colspan", "color", "align"];
for(var i=0;i<el.attributes.length;i++)
{
var attr = el.attributes.item(i);
var whiteListCheck = false;
//loop through whitelist
for(var j=0;j<whitelist.length;j++)
{
if(attr.nodeName === whitelist[j])
{
whiteListCheck = true;
break;
}
}
if(!whiteListCheck)
{
//second parameter means a case-sensitive search
el.removeAttribute(attr.nodeName, 1);
}
}
}
function postAttributes(el)
{
var txtHolder = document.createElement("p");
var titleTxt = document.createTextNode("attributes: ");
document.body.appendChild(txtHolder);
txtHolder.appendChild(titleTxt);
for(var i=0;i<el.attributes.length;i++)
{
var attr = el.attributes.item(i);
if(attr.nodeValue)
{
var txt = document.createTextNode(attr.nodeName + ": " + attr.nodeValue + " ");
txtHolder.appendChild(txt);
}
}
}
http://jsfiddle.net/mkmcdonald/ZsezN/3/
Tested as working in Firefox 4, IE 8, IE 7 (Quirks Mode), IE 6, Chrome 4, Safari 4, and Opera 11. One small quirk to note is IE in Quirks Mode will display the contentEditable attribute.
How about this: You're removing all of the element's attributes, correct? How about instead of removing all of it's attributes, you do this:
HTML:
<div id="myElement" fakeAttr="1" fakeAttr2="2">This is a test.</div>
jQuery:
var before = $("#myElement");
var after = $("<"+before[0].tagName+"/>", { html: before.html() });
alert( "Before: "+before[0].outerHTML );
alert( "After: "+after[0].outerHTML );
Same thing, but done in another way...
EDIT:
Added in feature where array of "good" attributes could be set...
var attrObj = function(el, good){
var obj = {}, attribs = el[0].attributes;
var tLC = function(s){ return s.toLowerCase() };
for(var i=0; i<attribs.length; i++){
var isGd = false;
for(var i2=0; i2<good.length; i2++){
if(tLC(attribs[i].name) == tLC(good[i2])){ isGd = true; break; }
}
if(isGd){ obj[attribs[i].name] = attribs[i].value; }
}
return obj;
};
var before = $("#myElement");
var newAttr = attrObj(before, ["id"]);
newAttr.html = before.html();
var after = $("<"+before[0].tagName+"/>", newAttr);
alert( "Before: "+before[0].outerHTML );
alert( "After: "+after[0].outerHTML );
Expanding on my comment, something like this should do the trick for purging:
function purgeAttributes(el) {
var curIndex = 0;
var whitelist = ["colspan", "color", "align"];
var initialLength = el.attributes.length;
var whiteListCheck = false;
for (var i = 0; i < initialLength; i++) {
var attr = el.attributes.item(curIndex);
for(var j = 0; j < whitelist.length; j++) {
if(attr.nodeName === whitelist[j]) {
whiteListCheck = true;
// We know that there is an item at curIndex we want to keep, proceed to the next
curIndex++;
break;
}
}
if(!whiteListCheck) {
el.removeAttribute(attr.nodeName);
}
};
}