[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

quick question: how to dynamically an image source file?

knowledgenotebook

1/19/2015 3:40:00 AM

Hi,

I have the following page/code to set default image src of "exp.png", then if var b value is no longer 0 use srk.png as the image src.

The html code is like this:
<img src="" id="myImg">


js code:
var b = 0;

var Pic = new Image(22,22);
if (b == 0) {
Pic.src = "exp.png";
document['myImg'].src = Pic.src;
}
else {
Pic.src = "srk.png";
document['myImg'].src = Pic.src;
}

Result:
The image is not rendered. What's wrong?

Thanks.
15 Answers

Neil X

7/30/2010 3:03:00 PM

0

On Jul 30, 1:56 am, "dr.narcolepsy" <jmi...@gmail.com> wrote:
> On Jul 30, 1:41 am, "DGDevin" <dgde...@invalid.invalid> wrote:
>
>
>
> > "Neil X" <nei...@yahoo.com> wrote in message
>
> >news:2ec6a44f-9f0e-4ef5-bf5b-800c78ff6b78@k19g2000yqc.googlegroups.com...
>
> > > Ok, so now you're casting judgment about other folks' nutritional
> > > decisions.
>
> > If they get an attack of the vapors over the thought of an occasional
> > burrito on the road, yeah, I suppose I am.  That somebody who smacks his
> > lips over the thought of a few pints of beer followed by some blotter and
> > then firing up the vapor-o-matic after the show is worried about what the
> > transfats in an occasional burrito might do to him is hilarious.
>
> > > You started with, "If it costs more to travel, the company
> > > should pay the difference," and now you've progressed to, "If your
> > > normal food preferences happen to not be cheap, too fucking bad, suck
> > > it up and eat the transfats."
>
> > And you've progressed from protesting the cost of restaurant food vs. home
> > cooking to suddenly being concerned with its nutritional value--acrobatic to
> > say the least.  If you think a meal prepared in the kitchens of the Crowne
> > Plaza with half a pound of butter and a pint of sour cream etc. isn't just
> > as unhealthy as that fast food burrito, you're kidding yourself.
>
> > > Yikes.
>
> > Indeed.  Now go eat your oakmeal and carrot sticks, all that
> > self-righteousness needs fuel.
>
> Maybe you guys are just hacking at each other but, if not, you're
> ignoring the situation in which Neil's boss doesn't give a shit about
> anything except that Neil does a good job during his presentation at
> the conference.  It's easily worth it to him (Neil's boss) to spend a
> few hundred $ on meals, if it makes Neil relaxed and happy and on top
> of his game and his presentation provides positive influence on just
> one more person, just one more company than it would have otherwise.


I am on the other side of the management picture here as often as I am
the one traveling. When I send one of our scientists out to represent
the company in a business matter, the last thing in the world I want
is for that scientist to have low level resentment that I nickel and
dime-ing him over his lunch. Our stockholders would be justifiably
ticked off if I did something like that. If the business matter is
important enough to pay for flights, accommodations, and a day or more
of productivity away from a given staff member's usual
responsibilities, the costs of meals just aren't a factor to worry
about. Bad managers and bad companies try to squeeze their employees
like that, and it almost always backfires, in predictable ways:
employee dissatisfaction, high turnover rate, low retention of senior
staff, all of which generates high recruiting costs, continual
expenses for training of new staff, reduced productivity due to junior
staff being inexperienced and low motivation. This all is Basic
Business, and folks who don't get it, I tend to doubt they've ever
been asked to manage anything in their lives.

Peace,
Neil X.

Evertjan.

1/19/2015 10:20:00 AM

0

justaguy <lichunshen84@gmail.com> wrote on 19 jan 2015 in
comp.lang.javascript:

> Re: quick question

Why a quick question?

Do you mean you know that the answer will be quick?

Then you probably know the answer.

> I have the following page/code to set default image src of "exp.png",
> then if var b value is no longer 0 use srk.png as the image src.
>
> The html code is like this:
> <img src="" id="myImg">
>
>
> js code:
> var b = 0;
>
> var Pic = new Image(22,22);
> if (b == 0) {
> Pic.src = "exp.png";
> document['myImg'].src = Pic.src;

document['myImg'] ??????

Perhaps that worked on IE minus 2.7,
in this century we do:

document.getElementById('myImg')


> }
> else {
> Pic.src = "srk.png";
> document['myImg'].src = Pic.src;
> }
>
> Result:
> The image is not rendered. What's wrong?

Did you debug?

alert(document['myImg']);

Next time please first debug, then ask a Q.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

JR

1/19/2015 12:48:00 PM

0

On 19/01/2015 08:20, Evertjan. wrote:
> justaguy wrote:

>> I have the following page/code to set default image src of "exp.png",
>> then if var b value is no longer 0 use srk.png as the image src.
>>
>> The html code is like this:
>> <img src="" id="myImg">
>>
>>
>> js code:
>> var b = 0;
>>
>> var Pic = new Image(22,22);
>> if (b == 0) {


Unless you guarantee that the b variable will always receive a number, I
suggest using the strict equals operator if (b === 0) in order to avoid
type coercion.

>> Pic.src = "exp.png";
>> document['myImg'].src = Pic.src;
>
> document['myImg'] ??????
>
> Perhaps that worked on IE minus 2.7,
> in this century we do:
>
> document.getElementById('myImg')
>

document.getElementById is preferable, but the OP could safely use the
document.images HTMLCollection in this case:

document.images.namedItem("myImg").src

or

document.images.[0].src // if the OP knows the index in advance.

>
>> }
>> else {
>> Pic.src = "srk.png";
>> document['myImg'].src = Pic.src;
>> }
>>
>> Result:
>> The image is not rendered. What's wrong?
>

Check if the src path is correct and use the onerror event handler, e.g

Pic.onerror = function () {
alert('error loading ' + this.src);
};

I'd suggest using a web developer tool to debug (press F12). See
<http://devtoolsecret...

--
Joao Rodrigues

knowledgenotebook

1/19/2015 3:52:00 PM

0

On Monday, January 19, 2015 at 7:48:11 AM UTC-5, J.R. wrote:
> On 19/01/2015 08:20, Evertjan. wrote:
> > justaguy wrote:
>
> >> I have the following page/code to set default image src of "exp.png",
> >> then if var b value is no longer 0 use srk.png as the image src.
> >>
> >> The html code is like this:
> >> <img src="" id="myImg">
> >>
> >>
> >> js code:
> >> var b = 0;
> >>
> >> var Pic = new Image(22,22);
> >> if (b == 0) {
>
>
> Unless you guarantee that the b variable will always receive a number, I
> suggest using the strict equals operator if (b === 0) in order to avoid
> type coercion.
>
> >> Pic.src = "exp.png";
> >> document['myImg'].src = Pic.src;
> >
> > document['myImg'] ??????
> >
> > Perhaps that worked on IE minus 2.7,
> > in this century we do:
> >
> > document.getElementById('myImg')
> >
>
> document.getElementById is preferable, but the OP could safely use the
> document.images HTMLCollection in this case:
>
> document.images.namedItem("myImg").src
>
> or
>
> document.images.[0].src // if the OP knows the index in advance.
>
> >
> >> }
> >> else {
> >> Pic.src = "srk.png";
> >> document['myImg'].src = Pic.src;
> >> }
> >>
> >> Result:
> >> The image is not rendered. What's wrong?
> >
>
> Check if the src path is correct and use the onerror event handler, e.g
>
> Pic.onerror = function () {
> alert('error loading ' + this.src);
> };
>
> I'd suggest using a web developer tool to debug (press F12). See
> <http://devtoolsecret...
>
> --
> Joao Rodrigues

Thanks.

Now, I'm having trouble to load the js function.

Please see code below.

function f1() {
// in case var b is not available from parent page
if (!b) {b = 0;}
alert(b);

// dynamim image code below
....

// just run the function
f1();

}


html code:
to load the js
<div id="myD">
....
</div>


outcome:
The alert failed to alert, which indicates that the function is not run. What could be wrong?

JJ

1/19/2015 7:47:00 PM

0

On Mon, 19 Jan 2015 07:52:19 -0800 (PST), justaguy wrote:
>
> Now, I'm having trouble to load the js function.
>
> Please see code below.
>
> function f1() {
> // in case var b is not available from parent page
> if (!b) {b = 0;}
> alert(b);
>
> // dynamim image code below
> ...
>
> // just run the function
> f1();
>
> }
>
> html code:
> to load the js
> <div id="myD">
> ...
> </div>
>
> outcome:
> The alert failed to alert, which indicates that the function is not run. What could be wrong?

If you use !b and b is not yet declared, the JavaScript engine will try to
retrieve b variable's value, fail, then stop the execution.

Use typeof instead. e.g.:

if ("undefined" != typeof b) {
console.log("is defined");
} else {
console.log("is not defined");
}

Denis McMahon

1/19/2015 9:15:00 PM

0

On Mon, 19 Jan 2015 07:52:19 -0800, justaguy wrote:

> Now, I'm having trouble to load the js function.
> Please see code below.

> function f1() {
> // in case var b is not available from parent page
> if (!b) {
> b = 0;
> }
> alert(b);
> // dynamim image code below ...
> // just run the function
> f1();
> }

> html code:
> to load the js <div id="myD">
> ...
> </div>

> outcome:
> The alert failed to alert, which indicates that the function is not run.
> What could be wrong?

In the code you posted, the only place f1 is called from seems to be
inside f1.

--
Denis McMahon, denismfmcmahon@gmail.com

knowledgenotebook

1/19/2015 10:25:00 PM

0

On Monday, January 19, 2015 at 2:47:30 PM UTC-5, JJ wrote:
> On Mon, 19 Jan 2015 07:52:19 -0800 (PST), justaguy wrote:
> >
> > Now, I'm having trouble to load the js function.
> >
> > Please see code below.
> >
> > function f1() {
> > // in case var b is not available from parent page
> > if (!b) {b = 0;}
> > alert(b);
> >
> > // dynamim image code below
> > ...
> >
> > // just run the function
> > f1();
> >
> > }
> >
> > html code:
> > to load the js
> > <div id="myD">
> > ...
> > </div>
> >
> > outcome:
> > The alert failed to alert, which indicates that the function is not run. What could be wrong?
>
> If you use !b and b is not yet declared, the JavaScript engine will try to
> retrieve b variable's value, fail, then stop the execution.
>
> Use typeof instead. e.g.:
>
> if ("undefined" != typeof b) {
> console.log("is defined");
> } else {
> console.log("is not defined");
> }

Ok, and since I need to find if var b has been defined, so, I rewrote the code below (thought its syntax is correct).

if ("undefined" == typeof b) {
console.log("b is not defined");
b = 0;
}
else {
alert ('b is defined');
}


Hence, in either case I would receive debugging info either via console (firebug is turned on) or via browser itself. However, none.
Which seems to suggest that the following code to run the js function has not been executed.
// just run the function
f1();


I thought, upon this page(a div) load, the js code is also processed but...
and in case some other js code inside this js function causing problem, I also tried to place an alert at the start of this js function, the alert didn't alert. So, it seems that this js function is simply not called.
Question, why not?

Thanks.

knowledgenotebook

1/19/2015 10:25:00 PM

0

On Monday, January 19, 2015 at 4:15:55 PM UTC-5, Denis McMahon wrote:
> On Mon, 19 Jan 2015 07:52:19 -0800, justaguy wrote:
>
> > Now, I'm having trouble to load the js function.
> > Please see code below.
>
> > function f1() {
> > // in case var b is not available from parent page
> > if (!b) {
> > b = 0;
> > }
> > alert(b);
> > // dynamim image code below ...
> > // just run the function
> > f1();
> > }
>
> > html code:
> > to load the js <div id="myD">
> > ...
> > </div>
>
> > outcome:
> > The alert failed to alert, which indicates that the function is not run.
> > What could be wrong?
>
> In the code you posted, the only place f1 is called from seems to be
> inside f1.
>

Please see the last paragraph of my last post. Thanks.

JJ

1/20/2015 12:32:00 AM

0

On Mon, 19 Jan 2015 14:24:30 -0800 (PST), justaguy wrote:
> Ok, and since I need to find if var b has been defined, so, I rewrote the code below (thought its syntax is correct).
>
> if ("undefined" == typeof b) {
> console.log("b is not defined");
> b = 0;
> }
> else {
> alert ('b is defined');
> }
>
> Hence, in either case I would receive debugging info either via console (firebug is turned on) or via browser itself. However, none.
> Which seems to suggest that the following code to run the js function has not been executed.
> // just run the function
> f1();

It's still not clear where exactly the f1() function is called. Chances are
that you have error elsewhere in the code that isn't mentioned - before that
f1() function call.

> I thought, upon this page(a div) load, the js code is also processed but...
> and in case some other js code inside this js function causing problem, I
> also tried to place an alert at the start of this js function, the alert
> didn't alert. So, it seems that this js function is simply not called.
> Question, why not?

What DIV? You did enclose you JavaScript code with SCRIPT tags, or did you
simply put the JavaScript code inside that DIV tags?

knowledgenotebook

1/20/2015 10:26:00 AM

0

On Monday, January 19, 2015 at 7:31:50 PM UTC-5, JJ wrote:
> On Mon, 19 Jan 2015 14:24:30 -0800 (PST), justaguy wrote:
> > Ok, and since I need to find if var b has been defined, so, I rewrote the code below (thought its syntax is correct).
> >
> > if ("undefined" == typeof b) {
> > console.log("b is not defined");
> > b = 0;
> > }
> > else {
> > alert ('b is defined');
> > }
> >
> > Hence, in either case I would receive debugging info either via console (firebug is turned on) or via browser itself. However, none.
> > Which seems to suggest that the following code to run the js function has not been executed.
> > // just run the function
> > f1();
>
> It's still not clear where exactly the f1() function is called. Chances are
> that you have error elsewhere in the code that isn't mentioned - before that
> f1() function call.
>
> > I thought, upon this page(a div) load, the js code is also processed but...
> > and in case some other js code inside this js function causing problem, I
> > also tried to place an alert at the start of this js function, the alert
> > didn't alert. So, it seems that this js function is simply not called.
> > Question, why not?
>
> What DIV? You did enclose you JavaScript code with SCRIPT tags, or did you
> simply put the JavaScript code inside that DIV tags?

Hi,

I've solved this problem by setting a default value for global var b, that is, b = 0 outside any function, then, at the start of another function, I reset its value to 1. That is, without value evaluation of this var.

Now, I'm stumbled by the following situation.

HTML code in the same page:
<a href="" onclick="if (b === 0){resizeL()}else{shrink()}">
<img src="exp.png" id="tn" style="width:22px; height:32px">
</a>

Result upon click ->
load a function lighting fast and return to its original state or cancel it.

<input type="button" value="<->" onclick="if (b === 0){resizeL()}else{shrink()}" id="nav" style="width:22px; height:32px">

Result upon click ->
As expected.


fyi,
(1)
resizeL() {
....
document.getElementById('nav').value = '-><-';
....
}

(2)
I've tested it using both Firefox (recent version) and Chrome (also recent version).

Why so?

Thanks.