/    Sign up×
Community /Pin to ProfileBookmark

get element without an event

I want to place an image next to
the currently selected text:

[URL=”http://www.anothenservices.com/public/relative_strength/jscrpt_ranking.html”]Relative Strength Calculator[/URL]

In the Ranked section, when a currency is selected;
for example “USD” would display a US Flag image.

PHP sure would make this easier.
Portions of the code:

[code=php]
<script type=”text/javascript”>
..code..
..code that determines array “ranked_currencies()”;..
f=document.calculator;
f.first.value = ranked_currencies[0];
f.second.value = ranked_currencies[1];
f.third.value = ranked_currencies[2];
f.fourth.value = ranked_currencies[3];
f.fifth.value = ranked_currencies[4];
f.sixth.value = ranked_currencies[5];
f.seventh.value = ranked_currencies[6];
f.eighth.value = ranked_currencies[7];
..code..
</script>

… html code …

<form name=”calculator” method=”post” action=””>
..code..

1<input name=”first” id=”first” size=”2″ disabled><br>
2<input name=”second” size=”2″ disabled><br>
3<input name=”third” size=”2″ disabled><br>
4<input name=”fourth” size=”2″ disabled><br>
5<input name=”fifth” size=”2″ disabled><br>
6<input name=”sixth” size=”2″ disabled><br>
7<input name=”seventh” size=”2″ disabled><br>
8<input name=”eighth” size=”2″ disabled><br>
..code..
</form>

[/code]

Above is portions of the code that I would like
to edit. I’ve tried several methods, but it’s not
like PHP at all. Javascript is very strict on how
it deals with variables.
My first idea was to put a javascript code there:

[code=php]
1<input name=”first” id=”first” size=”2″ disabled>

<script type=”text/javascript”>
var what_currency = document.getElementById(“first”);
switch(what_currency)
{ case “USD” : document.write(“<img scr=”usd.png” />”) break;
case “JPY” : document.write(“<img scr=”jpy.png” />”) break;
.. code
.. code
} </script>

<br>
[/code]

Now I know that the code above does not work.
and I do know that I could do this in PHP which
would solve everything, but I’m really trying to
learn Javascript.

Isn’t there a way I could use ” getElementById()” without
having to enable an event?

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@FangDec 09.2010 — Javascript is very strict on how it deals with variables[/QUOTE]No, it's not at all strict.

[I]document.write[/I] Don't use this after the document is loaded; it will create a new document.

[CODE]<script type="text/javascript">
window.onload=function() {
};

function Calculate_currency() {
// existing code here

changeImages();
}

function changeImages() {
var path = 'Images/';
var aObj=document.getElementById('ranked_col').getElementsByTagName('input');
var i=aObj.length;
while(i--) { // loop through inputs
if(aObj[i].value!='') {
aObj[i].nextSibling.src = path + aObj[i].value+'.png'; // images have same name as currency ie USD.png (case is important)
}
}
}
</script>
[/CODE]
[CODE]<style type="text/css">
label {display:block;}
</style>
[/CODE]
Do not change the formatting of the <label> html contents, or the script will fail![CODE]<td id="ranked_col"><!-- left side vertical -->
<label>1<input name="first" id="first" size="2" disabled><img alt="" src="default.png" height="10" width="15"></label>
<label>2<input name="second" id="second" size="2" disabled><img alt="" src="default.png" height="10" width="15"></label>
<label>3<input name="third" id="third" size="2" disabled><img alt="" src="default.png" height="10" width="15"></label>
.
.
<label>8<input name="eighth" id="eighth" size="2" disabled><img alt="" src="default.png" height="10" width="15"></label>
</td>
[/CODE]
Copy linkTweet thisAlerts:
@anothenauthorDec 09.2010 — YAAY! IT WORKS!!!

thx Fang.

Now I need to study

window.onload=function(){};

and I've never seen:

label {display:block;}

I'm assuming that it displays

the line and sends a line feed.

I also noticed that I can place

the function: changeImages()

below the function call, I did not

know this could be done.

I've also not ever used getElementsByTagName()

nor have I ever used ".. nextSibling.."

so I've got quite a bit of studying to do.

The rest of it seemed quite clear.
Copy linkTweet thisAlerts:
@FangDec 09.2010 — Tutorials: css, JavaScript and html dom
Copy linkTweet thisAlerts:
@anothenauthorDec 10.2010 — Well, I made some adjustments.

I finally discovered how to css

forms and made it larger, but I still

can't seem to put it in the stylesheet

section without it failing.

I changed the images and now using

.jpeg however, I can't seem to get it

to display "default.jpeg"

It will run correctly when first loaded,

however once it runs the new function

the rest of the images for "default.jpeg"

show a broken image.

I tried:
[code=php]function changeImages() {
var path = 'images/';
var aObj=
document.getElementById('ranked_col').getElementsByTagName('input');
var i=aObj.length;
while(i--) { // loop through inputs

// ///////////////////////////////////////////////////////////////
if(aObj[i].value="") {aObj[i].src = path + 'default.jpeg';}
// ///////////////////////////////////////////////////////////////

if(aObj[i].value!='') {
aObj[i].nextSibling.src = path + aObj[i].value+'.jpeg'; // images have same name as currency ie USD.png
}
}
}[/code]


and a few other variations, but each time

it failed.

Relative Strength (javascript)
Copy linkTweet thisAlerts:
@FangDec 10.2010 — Compare not equality[CODE]if(aObj[i].value[COLOR="Blue"]==[/COLOR]"")[/CODE]
Copy linkTweet thisAlerts:
@anothenauthorDec 10.2010 — Thx Fang, it seems I do that often.

However I did discover that and fixed it.

But that still wasn't the problem.

I finally discovered what the bug was,

I had to put " " spaces in the empty

form or else it would return error.

so I changed the ".. if(aObj[i].value!='') .."

to ".. if(aObj[i].value!=' ') .." using a

space instead of blank.

It works fine now.
×

Success!

Help @anothen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...