Why the value inside the loop and using the [i] is undefined? - javascript

using Mozilla jetpack , when i do the following code .. i get that linking is undefined !!! why ? or how to fix it ?
var links = doc.querySelectorAll('#courses_menu > ul > li > a');
var linkz=links[1].href.split("?");
var i = 0;
for (i=0;i<=4;i++)
{
var linking= links[i];
}
jetpack.notifications.show(" "+ linking);

Because it goes out of scope when the loop ends.
So you should have
var linking;
for (i=0;i<=4;i++)
{
linking= links[i];
}
But furthermore, what are you trying to do here? You overwrite linking four times. Do you want to display all of the links? If so, you can concatenate them like:
var linking = "";
for (i=0;i<=4;i++)
{
linking = linking + links[i] + " ";
}
Edit: the commenters are right; I did forget that there is no block scoping in Javascript. Did this fix your code? I can't imagine that it did. The only other thing that I can think of is that links[4] is undefined, and then you would be assigning undefined to linking.
Anyway, I can't delete this because it's been accepted, but if anyone else comes up with a more useful answer, feel free to unaccept this one.

Related

Extract Content from a Pseudo Element [duplicate]

I need to get :after and assign it to variable. It is possible?
querySelectorAll doesn't work.
alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined
The short answer is that you can’t. It’s not there yet.
JavaScript has access to the DOM, which is built when the page is loaded from HTML, and modified further when JavaScript manipulates it.
A pseudo element is generated by CSS, rather than HTML or JavaScript. It is there purely to give CSS something to hang on to, but it all happens without JavaScript having any idea.
This is how it should be. In the overall scheme of things, the pages starts off as HTML. JavaScript can be used to modify its behaviour and to manipulate the content on one hand, and CSS can be used to control the presentation of the result:
HTML [→ JavaScript] → CSS → Result
You’ll see that CSS, complete with pseudo elements, comes at the end, so JavaScript doesn’t get a look in.
See also:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Usage_notes
https://www.w3.org/TR/selectors-api/#grammar
Edit
It seems that in modern JavaScript there is a workaround using window.getComputedStyle(element,pseudoElement):
var element = document.querySelector(' … ');
var styles = window.getComputedStyle(element,':after')
var content = styles['content'];
You can do this:
window.getComputedStyle(
document.querySelector('somedivId'), ':after'
);
Sample here: https://jsfiddle.net/cfwmqbvn/
I use an arrow pointing in the direction that the content and sidebar will toggle to/from via a CSS pseudo-element. The code below is effectively a write mode however it is entirely possible to read CSS pseudo-element content as well.
Since there is a bit involved I'll also post the prerequisites (source: JAB Creations web platform JavaScript documentation, if anything missing look it up there) so those who wish to try it out can fairly quickly do so.
CSS
#menu a[href*='sidebar']::after {content: '\2192' !important;}
JavaScript Use
css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');
JavaScript Prerequisites
var sidebar = 20;
function id_(id)
{
return (document.getElementById(id)) ? document.getElementById(id) : false;
}
function css_rule_set(selector,property,value,important)
{
try
{
for (var i = 0; i<document.styleSheets.length; i++)
{
var ss = document.styleSheets[i];
var r = ss.cssRules ? ss.cssRules : ss.rules;
for (var j = 0; j<r.length; j++)
{
if (r[j].selectorText && r[j].selectorText==selector)
{
if (typeof important=='undefined') {r[j].style.setProperty(property,value);}
else {r[j].style.setProperty(property,value,'important');}
break;
}
}
}
}
catch(e) {if (e.name !== 'SecurityError') {console.log('Developer: '+e);}}
}
function sidebar_toggle()
{
if (id_('menu_mobile')) {id_('menu_mobile').checked = false;}
if (getComputedStyle(id_('side')).getPropertyValue('display') == 'none')
{
css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');
if (is_mobile())
{
css_rule_set('main','display','none','important');
css_rule_set('#side','width','100%','important');
css_rule_set('#side','display','block','important');
}
else
{
css_rule_set('main','width',(100 - sidebar)+'%');
css_rule_set('#side','display','block');
}
}
else
{
css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2190"','important');
if (is_mobile())
{
css_rule_set('main','display','block','important');
css_rule_set('main','width','100%','important');
css_rule_set('#side','display','none','important');
}
else
{
css_rule_set('main','width','100%','important');
css_rule_set('#side','display','none');
}
}
There is a way in JavaScript to access value of pseudo elements without any library. To get the value, you need to use the 'getComputedStyle' function. The second parameter is optional.
let elem = window.getComputedStyle(parent, ':before');
alert(elem.getPropertyValue('background'))
This will do alert the value of pseudo element.
let elem = window.getComputedStyle(document.querySelector('#item'), ':after');
console.log(elem.getPropertyValue('content'))

Ideas for a correct function on my webpage?

I am having problems with a javascript function. I want to replace an icon by changing the class.
On my page, I have the following element:
<i class="wait icon" alt="{webui_botstatenotavailable}" title="{webui_botstatenotavailable}" id="{botname}"></i>
The following javascript should change the class, but it does not work:
function incomingBotStatusList(http_request, statusOff, statusOn)
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
if (http_request.responseText.length < 7)
{
// Error
}
else
{
var botStatusList = JSON.parse(http_request.responseText);
for (var key in botStatusList)
{
if (botStatusList.hasOwnProperty(key))
{
var botStatusImage = document.getElementById(key);
if (botStatusImage != null)
{
if (botStatusList[key] == 0)
{
botStatusImage.class.innerHTML = "images/bullet_red.png";
botStatusImage.title = statusOff;
botStatusImage.alt = statusOff;
}
else if (botStatusList[key] == 1)
{
botStatusImage.class.innerHTML = "<i class=\"checkmark green icon\">";
botStatusImage.alt = statusOn;
botStatusImage.title = statusOn;
}
}
}
}
}
}
}
}
Did someone from you know how it will work?
Thanks for your help!
Best Regards
Pierre
I see a couple of problems with your code. First, the <i> element is used to apply italic formatting to text. It is not the HTML code for an icon or an image.
Secondly, you write botStatusImage.class.innerHTML, but the Element.class does not exist, and Element.className is a string. It does not have an innerHTML attribute. So, you could write botStatusImage.className = "new_class_name"; and this would be more correct.
You should then change the image source by calling botStatusImage.setAttribute('src', new_url), where you have set new_url to the new image location.
Check out the javascript reference for the Element class that is returned from document.getElementById: check this link
My recommendation, start simple, then make it complex.
First, try to get the icon to change without the AJAX request. Try writing a function like this:
function changeIcon( imageId, newUrl ){
var element = document.getElementById( imageId );
element.setAttribute( "src", newUrl );
}
Then test this function in the console by passing calling it with the URL's manually.
Once that works, don't change it! Next add the AJAX call, and when you have the Icon url from your server response, all you do is call the function that you already wrote and tested. That way you separate the AJAX code from the image update code and you can test them separately.
The key is smaller functions. Build the easy stuff first, and then call those easy functions from the harder functions. Once you know the easy function works well, it becomes much easier to find problems in the harder functions.

Can't seem to get to the src= to compare image filenames in MonkeyScript

My function is as follows:
function mySound() {
var eventTable = document.querySelector("#eventContent");
var eventCella=eventTable.getElementsByClassName("ago_eventlist_activity");
var eventCellb = eventTable.getElementsByClassName("missionFleet");
for (var i = 0; i < eventTable.rows.length-1; i++) {
var cella = eventCella[i];
var cellb = eventCellb[i];
if (cella.src == "Activity15.gif" && cellb.src == "60a018ae3104b4c7e5af8b2bde5aee.gif")
{theSound = probeSound; oaPlaySound();}
if (cella.img == "Activity15.gif" && cellb.img == "cd360bccfc35b10966323c56ca8aac.gif")
{theSound = attackSound; oaPlaySound();}
if (cella.img == "Activity15.gif" && cellb.img == "575dfbbe877f58d6c09120ffbcaabe.gif") {theSound = attackSoundRIP; oaPlaySound();}
} /* for i */
}
*I can't use ...byid cause it doesn't seem to have one?
I am including a link to the FireFox inspect element so you can see what I can see to try to make this work.
Image of InspectElement:
Any help would be helpful I am just trying to code this for a friend and I really don't know java at all.
Thanks
There is a difference between Java and javascript. I'm guessing you mean javascript since that is what the code appears to be.
There are a few issues with the code
cella.img does not target the image inside of the cell, you'll need to target the image first, or use find the image inside the cell.
var eventCella = eventTable.querySelector(".missionFleet img");
or
var imgb = eventCellb[i].querySelector("img");
Does the ago_eventlist_activity cell even contain an image? There doesn't seem to be one in the screenshot.
Checking the image src needs to include the complete url, unless you use an indexOf...
if (imgb.src.indexOf('60a018ae3104b4c7e5af8b2bde5aee.gif') > -1) {
// do something
}
I hope that helps. Please, the next time you ask a question, include the HTML instead of a screenshot. Or better yet, include a demo (jsFiddle) that shows the problem because it makes it easier for others to help. Not everyone will take the time or make an effort.

If ? found in redirect url, then change url

Please see this jsfiddle.
I have got it developed for stackflow only..
Now i just have a little problem with it.
If the final url which will be redirected consist of ? or & in it, then instead of addQueryString , addQueryString1 should be used..
Can anyone help please.
Sorry Rohit and Tim. I thought it would be easier if you see the code directly there. But here is my code :
// Plain Javascript
var links = document.getElementsByTagName('a');
for (var i = 0, max = links.length; i < max; i++) {
var _href = links[i].href;
var addQueryString = "?utm_source=tyroo&utm_medium=affiliate&utm_campaign=12june12_20percenteossoffer";
var addQueryString1 = "&utm_source=tyroo&utm_medium=affiliate&utm_campaign=12june12_20percenteossoffer";
if (_href.indexOf('gog.com') !== -1) {
links[i].href = 'http://example.com/lnkurl=' + _href + encodeURIComponent(addQueryString);
}
}
​
It is a code for redirecting affiliate link found in the webpage via a affiliate url so that we earn commission from the links posted by users.
In my code, any link of gog.com will be redirected as http://example.com/lnkurl=http://www.gog.com/%3Futm_source%3Dtyroo%26utm_medium%3Daffiliate%26utm_campaign%3D12june12_20percenteossoffer
Now i am asking you guyz, that if the link is for ex, gog.com/test?price=xyz
Now you see the link itself contain a ? and = in it. So the redirected url as per my script will become : http://example.com/lnkurl=http://www.gog.com/test?price=xyz%3Futm_source%3Dtyroo%26utm_medium%3Daffiliate%26utm_campaign%3D12june12_20percenteossoffer
which won't work.
All i want to do is, if the url contains any ? or & or = in it, then it should use addQueryString1 instead of addQueryString .. and also, if possible, the content in url starting from ? or & should also be encoded..
Please help if you guyz can.. thanks
I think you are looking for a javascript solution. if so you can follow this
if(url.indexOf("?") != -1)
{
//? is present
} else {
//? is not present
}
Same for &

Change all website links to affiliate links automatically

I would like to be able to automatically change links into affiliate links automatically on my MediaWiki installation. This would help to reduce the amount of time managing links in case the code needs to be changed in the future.
This is the setup of my GOG.com affiliate scheme: I need to append this key to the end of every GOG.com link: ?pp=708a77db476d737e54b8bf4663fc79b346d696d2
gog.com/en/gamecard/baldurs_gate_the_original_saga/?pp=708a77db476d737e54b8bf4663fc79b346d696d2
Is it possible for a piece of code, like Javascript, to intercept all links (like http://www.gog.com/en/gamecard/baldurs_gate_the_original_saga/) and append the affiliate code on the end, as in the above example?
I'm aware of this piece of Javascript code called Amazon Associate Link Localiser which does a similar thing. However, it only works for Amazon links, and it also localises links which is a feature I don't want.
Right way is to use LinkerMakeExternalLink mediawiki hook like that ( you can put it at bottom of your LocalSettings.php:
$wgHooks['LinkerMakeExternalLink'][] = 'ExampleExtension::exampleLinkerMakeExternalLink';
class ExampleExtension {
public static function exampleLinkerMakeExternalLink( &$url, &$text, &$link, &$attribs, $linktype ) {
if( strpos( $url, 'gog.com') !== false ) {
$url .= '?pp=708a77db476d737e54b8bf4663fc79b346d696d2';
}
return false;
}
}
Not sure how great it would be performance wise for hundreds of links.
// Plain Javascript
var links = document.getElementsByTagName('a');
for (var i = 0, max = links.length; i < max; i++) {
var _href = links[i].href;
if (_href.indexOf('gog.com') !== -1) {
links[i].href = _href + '?pp=708a77db476d737e54b8bf4663fc79b346d696d2';
}
}
DEMO
So you can also use jquery to bind any link click. This way you can do your link eval on the fly. This jsfiddle is a rough run through of what i think you're trying to accomplish. The alerts are just for your benefit and should be removed.
$("a").click(function() {
addAffiliate(this);
});
myCode = "?pp=708a77db476d737e54b8bf4663fc79b346d696d2";
myAmazonCode = "?tag=shihac-20"
function addAffiliate(link) {
alert("enterting script: " + link.href);
if ((link.href).indexOf("gog.com") > -1 && (link.href).indexOf(myCode) < 0) {
link.href = link.href + myCode;
}else if((link.href).indexOf("amazon.com") > -1 && (link.href).indexOf(myAmazonCode) < 0){
link.href = link.href + myAmazonCode;
}
alert(link.href);
return true;
}​
http://jsfiddle.net/du47b/23/
UPDATE: added code and fully qualified paths
UPDATE: added 'else if' block for other codes. using 'else if' instead of just another if block will hopefully cut back on unnecessary processing.

Categories