Develop Reference

javascript: save characters/digits without libraries

I use a lot of the following expressions in my code:
document.
.getElementsBy...
.querySelector...
I need to save characters without using any libraries. That can be done by
var d = document;
Then, instead of document. I can write d. now.
I am wondering if there is a simple way to do the same thing for methods
.getElementsBy... and .querySelector....
Since these have a variable term, I cannot put the entire thing into a
variable, like var q = .querySelector(".class"), because the .class
changes almost every time.

You can create functions to avoid adding properties to the document object as shortcut if you don't want to.
function gEBI(d,id)
{
return d.getElementById(id);
}
function qS(d,s)
{
return d.querySelector(s);
}
var d = document;
var ele1 = gEBI(d,"yourID");
var ele2 = qS(d,".class");

You can make your own shortcut functions-references manually.
document.gEBI = document.getElementById;
document.gEBI(id);
But it's not a good practice to make such shortcuts.

using javascript to replace onpage javascript

I'm fairly new to javascript so please go easy on me,
I have this code on a webpage:
<script type="text/javascript"> bb1 = "oldcode"; bb2 = "morecodehgere"; bb3 = 160000;</script>
I want to replace 1% of all page loads oldcode to newcode
There are multiple instances of this code on the same page and I want to replace them all.
window.onload = replaceScript;
function replaceScript() {
var randomNumber = Math.floor(Math.random()*101);
var toReplace = 'oldcode';
var replaceWith ='newcode';
if randomNumber == 1 {
document.body.innerHTML = document.body.innerHTML.replace(/toReplace/g, replaceWith);
}
}
This is the current code I've got but it doesn't work.
Is javascript the bast way to achieve what I'm looking to do? If so whats the best way to do this?

The regular expression literal:
/toReplace/g
will create a regular expression object that matches the string "toReplace". If you want to create a regular expression to match the (string) value of the variable toReplace, you must use the RegExp constructor:
var re = new RegExp(toReplace, 'g');
It is not a good idea to replace the innerHTML of the body with a copy of itself. The innerHTML property doesn't necessarily reflect all the nuances of the DOM and will not include things like dynamically added listeners. It also varies from browser to browser.
Using a regular expression to replace parts of innerHTML is almost certain to produce unpredictable results, it may work well on trivial pages but will not be reliable on complex pages.

Trying to change all the numbers in an onchange - onchange.replace doesn't work?

I have an xsl page which uses
<xsl:variable name="pos" select="Position()"/>
in the onchange events
onchange="updateDropdown({$pos});someElement_{$pos}.value = {$pos}";
When evaluated on page p=load this will be read as
onchange="updateDropdown(1);someElement_1.value = 1";
onchange="updateDropdown(2);someElement_2.value = 2";
onchange="updateDropdown(3);someElement_3.value = 3";
When I add a row to the bottom of this using a button which copies the entire first row to the bottom it had to go through and update these numbers because it is not handled
I do
lastRowEl = rowEls[rowEls.length-1];
then
lastRowEl.id = "element_" + rowEls.length
lastRowEl.value = "";
finally,
lastRowEl.onchange = lastRowEl.onchange.replace(/\d/g, rowEls.length)
id gets changed to element_4
value gets modified to blank
but onchange.replace does not work and so onchange remains as
onchange="updateDropdown(1);someElement_1.value = 1";
instaead of
onchange="updateDropdown(4);someElement_4.value = 4";
How can I replace all numbers in an onchange function and reset the onchange function with the numbers modified for the element in the last row?
Thanks

This seems a bit weird and I wonder why it works at all, since the value returned by your lastRowEl.onchange is most likely a Function and not a String. Some automatic toString() call seems to happen on your platform (doesn't work when I test this in Safari). However, the result will most likely be a multiline string and you will probably need to use multiline RegExps, e.g. /\d/mg.
Even if this works it is pretty ugly. What about defining a function which does all the calls you put into your handler?
function onchangeHandler(index) {
updateDropdown(index);
window["someElement_" + index].value = index;
}
You would then assign these handler functions in HTML
< ... onchange="onchangeHandler(1);" .... />
and update them in Javascript
(function() {
var index = rowEls.length;
lastRowEl.onchange = function() {onchangeHandler(index);};
})();
Note that the closure around the assignment is may not be necessary depending on your surrounding code. You will most likely need the explicit index variable definition, though.

Try the following solution
var onch = new String(lastRowEl.onchange);
onch = onch.replace(/\d/g, rowEls.length);
lastRowEl.onchange = new Function(onch);
This will work as you expect.
Hope this solves your problem.

Quotes in Javascript

I have been trying for hours to fix this code, I can't see what's wrong:
document.getElementById('detail'+num).innerHTML='<a class="dobpicker" href="javascript:NewCal('+s_d+','+ddmmyy+')">'
The problem is in href="javascript ..."
s_d is a javascript variable defined as
var num = 2;
var s_d = "sname"+num;
var ddmmyy = "ddmmyy";
Basically I need to call a javascript function with different parameter each time.

Use a backslash like \'.
document.getElementById('detail'+num).innerHTML=
'<a class="dobpicker" href="javascript:NewCal(\''+s_d+'\',\''+ddmmyy+'\')">'

Since this is the value of a href attribute, HTML encode them:
document.getElementById('detail'+num).innerHTML='<a class="dobpicker" href="javascript:NewCal("'+s_d+'","'+ddmmyy+'")">'
Or better yet don't use the javascript: protocol:
[0,1,2,3,4,5].forEach(function(num) {
var s_r = "sname"+num;
var ddmmyy = "ddmmyy";
var aEl = document.createElement("a");
aEl.className = "dobpicker";
aEl.onclick = function() {
NewCal(s_d, ddmmyy);
}
document.getElementById('detail'+num).appendChild(aEl);
});

Your .innerHTML setting is using s_d, but your variable declaration has s_r.
EDIT: That was the first thing that jumped out at me. Having looked a bit closer and realised the values are strings, I think fixing the variable name together with adding some escaped quotation marks as in Daniel A. White's answer will do the trick.

where syntax error goes in my javascript code?

If I run this code in Firebug everything goes fine and works:
var ingarray =$(".ingsparts");
$.each(ingarray ,function(n){
var ing = ingarray[n];
console.log($(ing).find('.name').val());
console.log($(ing).find('.value').val())
});
but if I run this, it doesn't work:
var ingarray =$(".ingsparts");
$.each(ingarray ,function(n){
var ing = ingarray[n];
var in = $(ing).find('.name').val();
var ms = $(ing).find('.value').val();
});

It seems that in is a reserved word; use another variable name.

in is a reserved word in Javascript (see here for more info), you will have to rename this variable.

Yeah, dont use in as variable name, but also, your each can be done more simply:
var ingarray = $(".ingsparts");
ingarray.each(function(){
var name = $(this).find('.name').val();
var value = $(this).find('.value').val();
...
});

The second example defines the in and ms variables inside the function. This means that they get function scope and are not usable outside of the function. So the variables are set, but never used and not accessed.