Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26616 > unrolled thread

quick question: how to dynamically an image source file?

Back to article view | Back to comp.lang.javascript

Contents

  quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-18 19:39 -0800
    Re: quick question: how to dynamically an image source file? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-01-19 11:20 +0100
      Re: quick question: how to dynamically an image source file? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-01-19 10:48 -0200
        Re: quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-19 07:52 -0800
          Re: quick question: how to dynamically an image source file? JJ <jj4public@vfemail.net> - 2015-01-20 02:47 +0700
            Re: quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-19 14:24 -0800
              Re: quick question: how to dynamically an image source file? JJ <jj4public@vfemail.net> - 2015-01-20 07:31 +0700
                Re: quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-20 02:26 -0800
              Re: quick question: how to dynamically an image source file? Tim Streater <timstreater@greenbee.net> - 2015-01-20 12:08 +0000
                Re: quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-20 12:20 -0800
            Re: quick question: how to dynamically an image source file? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-20 14:06 +0100
              Re: quick question: how to dynamically an image source file? Tim Streater <timstreater@greenbee.net> - 2015-01-20 14:52 +0000
                Re: quick question: how to dynamically an image source file? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-20 20:47 +0100
          Re: quick question: how to dynamically an image source file? Denis McMahon <denismfmcmahon@gmail.com> - 2015-01-19 21:15 +0000
            Re: quick question: how to dynamically an image source file? justaguy <lichunshen84@gmail.com> - 2015-01-19 14:25 -0800

#26616 — quick question: how to dynamically an image source file?

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.

[toc] | [next] | [standalone]

#26619

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)

[toc] | [prev] | [next] | [standalone]

#26621

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://devtoolsecrets.com/>

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#26623

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://devtoolsecrets.com/>
> 
> -- 
> 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?

[toc] | [prev] | [next] | [standalone]

#26624

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");
}

[toc] | [prev] | [next] | [standalone]

#26626

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.

[toc] | [prev] | [next] | [standalone]

#26628

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?

[toc] | [prev] | [next] | [standalone]

#26630

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.

[toc] | [prev] | [next] | [standalone]

#26631

In article <0b11760e-aae1-4429-bc43-1b2559d81532@googlegroups.com>,
justaguy <lichunshen84@gmail.com> wrote:

>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?

As someone already said, from your code it looked like the place where
f1() was being called was from inside f1().

-- 
"The problem with defending the purity of the English language is that English
is about as pure as a cribhouse whore. We don't just borrow words; on occasion,
English has pursued other languages down alleyways to beat them unconscious 
and rifle their pockets for new vocabulary."            -- James Nicoll, rasfw

[toc] | [prev] | [next] | [standalone]

#26636

On Tuesday, January 20, 2015 at 7:08:35 AM UTC-5, Tim Streater wrote:
> In article <0b11760e-aae1-4429-bc43-1b2559d81532@googlegroups.com>,
> justaguy <lichunshen84@gmail.com> wrote:
> 
> >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?
> 
> As someone already said, from your code it looked like the place where
> f1() was being called was from inside f1().
> 
> -- 
> "The problem with defending the purity of the English language is that English
> is about as pure as a cribhouse whore. We don't just borrow words; on occasion,
> English has pursued other languages down alleyways to beat them unconscious 
> and rifle their pockets for new vocabulary."            -- James Nicoll, rasfw

I've found the problem.

In the following code, the href's value is nothing, that makes browser to reload the page:

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

[toc] | [prev] | [next] | [standalone]

#26633

JJ wrote:

> 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.

This statement does not make a lot of sense.

It is only possible to “not yet declare” an identifier when using eval() and 
not in strict mode. [1]  Other declarations in an execution context are 
processed *before* execution of the statements in that context begins. [2]

The “JavaScript engine” (the ECMAScript implementation) will _not_ “try to 
retrieve b variable's value”; it does not even "know" at this point 
*whether* the identifier is referring to a variable.

Instead, the identifier “b” is resolved.  This is done according to the 
current *scope chain*.  If no other object is in the scope chain before it 
(per the “with” statement in non-strict mode), the Variable Object of the 
same execution context (ES 1 to 3 Final), or the Variable Declaration 
Binding (ES 5.x) will be checked against.  If no such name can be found 
there, i. e. the next object in the scope chain does not have a property of 
that name, lookup will continue along the scope chain until is end is 
reached, [3] at which usually is the Global Object (not in eval code in 
strict mode [1]).

If the last object in the scope chain still does not have such a property, 
execution does _not_ simply fail.  Instead, a ReferenceError exception is 
thrown at the line of the originating code [4] which can be caught in the 
respective execution context and calling execution contexts [5] by a try–
catch(–finally) statement [6].  Only if the exception is not caught, 
execution of the program terminates, returning the exception referred to by 
“e” as part of the abrupt completion “(throw, e, empty)”. [7]

_____________
[1] <http://ecma-international.org/ecma-262/5.1/#sec-10.4.2>
[2] <http://ecma-international.org/ecma-262/5.1/#sec-10.3>
[3] <http://ecma-international.org/ecma-262/5.1/#sec-10.3.1>
[4] <http://ecma-international.org/ecma-262/5.1/#sec-8.7.1>
[5] <http://ecma-international.org/ecma-262/5.1/#sec-5.2>
[6] <http://ecma-international.org/ecma-262/5.1/#sec-12.14>
[7] <http://ecma-international.org/ecma-262/5.1/#sec-12.1>
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26634

In article <1894285.eRrXKrdmPT@PointedEars.de>, Thomas 'PointedEars'
Lahn <PointedEars@web.de> wrote:

>If the last object in the scope chain still does not have such a property, 
>execution does _not_ simply fail.  Instead, a ReferenceError exception is 
>thrown at the line of the originating code [4] which can be caught in the 
>respective execution context and calling execution contexts [5] by a try–
>catch(–finally) statement [6].

Personally I'd be more inclined to use window.onerror so that I don't
have to put try/catch around every statement in my program.

-- 
"The idea that Bill Gates has appeared like a knight in shining armour to
 lead all customers out of a mire of technological chaos neatly ignores 
 the fact that it was he who, by peddling second-rate technology, led them
 into it in the first place."                             - Douglas Adams

[toc] | [prev] | [next] | [standalone]

#26635

Tim Streater wrote:

> […] Thomas 'PointedEars' Lahn […] wrote:
>>If the last object in the scope chain still does not have such a property,
>>execution does _not_ simply fail.  Instead, a ReferenceError exception is
>>thrown at the line of the originating code [4] which can be caught in the
>>respective execution context and calling execution contexts [5] by a try–
>>catch(–finally) statement [6].
> 
> Personally I'd be more inclined to use window.onerror so that I don't
> have to put try/catch around every statement in my program.

Your logic is flawed.  You do not “have to” and you SHOULD NOT “put 
try/catch around *every* statement in your program” because the result would 
be a maintenance nightmare.

By contrast to “try–catch(–finally)”, “window.onerror” is a blunt, 
unreliable instrument that was standardized only recently (with HTML5) [1]
[2].  It cannot be used to handle standard exceptions thrown by 
implementations of Specification algorithms, and not outside an HTML UA.
If you must use it, use it only as a last resort.

_______
[1] <https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onerror>
[2] <http://www.w3.org/TR/html5/webappapis.html#runtime-script-errors>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26625

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

[toc] | [prev] | [next] | [standalone]

#26627

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.  

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web