Develop Reference

Having a number at the end of a file and increasing it by 1 each time (with Javascript)?

My JS file creates this image and adds it to a folder.
'writenewimage_'+objId+'.png';
Currently 'writenewimage_'+objId+'.png' just keeps getting replaced/overwritten, which isn't ideal. objId is "1".
What I'd like is for that number "1" at the end of the image name to increase by 1. So that each time the code is executed it adds a different new image to the folder. 'writenewimage_1','writenewimage_2','writenewimage_3' etc.
Would super appreciate any help! I'm a newbie to Javascript and this would be very helpful to learn. :)
Here is the code that includes this file:
Echomap_LoaderCCG.prototype.processDataToGame = function (gameActor, dataActor) {
Echomap.Utils.log('processDataToGame', 'Called');
//Echomap.Params.CCGData = {};
var faPath = Echomap.CCGUtil.getFacesPath();
var tvPath = Echomap.CCGUtil.getTVPath();
var svPath = Echomap.CCGUtil.getSVPath();
var objId = Echomap.Utils.getActorIdFromActor(gameActor);
var objName = gameActor._name;
Echomap.Utils.log('processDataToGame','objId', objId);
Echomap.Utils.log('processDataToGame','objName', objName);
gameActor.isComposite = undefined;
gameActor.composite = {};
gameActor.composite.filename = {};
gameActor.composite.filename.face = faPath + 'writenewimage_'+objId+'.png';
gameActor.composite.filename.tv = tvPath + 'writenewimage_'+objId+'.png';
gameActor.composite.filename.sv = svPath + 'writenewimage_'+objId+'.png';
If it's confusing or you need more code than this, let me know! There might be some more I need to show, I'm not sure, but I don't wanna overwhelm you all with anything that might be irrelevant. I'm a bit of a noob with JS and trying to get my head around it. Just wanna try and increase "writenewimage_1"s number by 1 each time so they can be separate files if possible rather than have it keep overwriting the same file. ^_^

unexpected token error in the code

thr below is my code, i try to make tdsum an array, but some how error shows up and i cannot fix it no matter what i did, can anyone please help me, i have tried to replace ntr with numbers and other characters, but it does not work either, so i suspect that there is something i missed that is not related to the ntr part
var tdsum = [];
function find(element,ntr) {
alert(element.cells[0].innerHTML);
var tr_sum = element.parentNode.childElementCount
var tdsum[ntr] = element.childElementCount;
alert(ntr);
alert(tdsum[2])
}
$('#row2').click();

You don't declare elements in an array. You only need to declare the array itself.
Remove the var on this line:
tdsum[ntr] = element.childElementCount;

Displaying images with Javascript based on user input

I have been trying to display image with the following code. The user input is intended to be compared to bring up the right picture.
$(document).ready(function(){
var defaultimg = document.getElementById('image1');
defaultimg.src = pictureImage;
var pictureImage = "images/unknown.png";
if({{messages.get.message}} == "Mewtwo"){
var imgobject = document.getElementById('image1');
imgobject.src = pictureImage;
pictureImage = "images/150.png";
}
if({{messages.get.message}} == "Charmeleon"){
var imgobject2 = document.getElementById('image1');
imgobject2.src = pictureImage;
pictureImage = "images/005.png";
}
if({{messages.get.message}} == "Warturtle"){
var imgobject3 = document.getElementById('image1');
imgobject3.src = pictureImage;
pictureImage = "images/008.png";
}
)}
to the following piece of html
<img id="image1" alt="Pokemon" width="88" height="75"> 
At the moment it only displays an empty box.
Can someone offer advice on whether this approach can be fixed to display the images? Thanks for the time and help.

that's probably a reference loop:
$(document).ready(function(){
var defaultimg = document.getElementById('image1');
// defaultimg now contains image1
// using jQuery and getElementbyId together is weired
defaultimg.src = pictureImage;
// pictureImage is not assigned, so the url is empty
// prob. cause for empty block?
var pictureImage = "images/unknown.png";
// ok, now we assign an url
if({{messages.get.message}} == "Mewtwo"){
// is that path correct?
var imgobject = document.getElementById('image1');
// copy of the empty image from above
imgobject.src = pictureImage;
// we assign an url
pictureImage = "images/150.png";
// new url on pictureImage, unused so far.
}
...
if none of the conditions like if({{messages.get.message}} == "Mewtwo"){
is true, it must show nothing due to defaultimg.src = pictureImage; with unassigned pictureImage variable.

You might want to state with which kind of template engine or the like you work, as "{{messages.get.message}}" wouldn't help you much in vanilla js (though it would be syntactically well formed)
Tip for debugging:
debugger;
in js code starts up the debugger in chrome/firefox(+firebug)/...
otherwise you can also use the console commands, e.g.
console.debug("if 1")
to find out what is happening
also have a look at console output in general, there should be no warnings or errors.
Next:
You're trying to use the probably global (because of missing "var" in front) variable "pictureImage" before you define it. Javascript is run from start to end, from left to right (let's just assume it's that way for easier understanding), top to bottom.
So you try to set the src of an image to something which is undefined at that point, and later on define that variable. There is no such thing as pointers to non-object types in javascript (which string constants are)
To fix your problem you'll probably have to swap some lines in your code, so the used variable gets set, and THEN is used, not the other way around.

javascript adding strings together

var body = "jsonString=123";
var mybody = body.replace("jsonString=","");
console.log("mybody:"+mybody);
console.log("myhead:"+body.replace("jsonString=",""));
This this should give two equal outputs to console.log file but it doesnt!
Output:
mybody:
myhead:123
Can someone explain why variable mybody is blank?
Shouldnt it be 123?
EDIT
I am such a fool, there were some unrelated problems with my execution environment that led to this. It has nothing to do with javascript.
Thanks for the help SO

It is giving me the correct output per this jsFiddle
Results:
mybody:123
myhead:123

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.