By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,960 Members | 1,574 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,960 IT Pros & Developers. It's quick & easy.

how to add image based on if condition in JavaScript

P: 14
Hi All,
i am asking this question for 2nd time, but still didn't get the reply. anyone pls help me how to insert image based on if condition in javascript. this is my code:
Expand|Select|Wrap|Line Numbers
  1. if(desc == "Cloudy")
  2. {
  3. alert("cloudy");        $("input#desc").val(response.getElementsByTagName("desc").item(0).firstChild?response.getElementsByTagName("desc").item(0).firstChild.data : "");
  4. document.write(unescape("<img src='images/sunny.gif'>" +desc.innerHTML));
  5. }
but document.write() opens a new window how to avoid it ? my application should display a weather forecast with respected image

this is my client code:
Expand|Select|Wrap|Line Numbers
  1. <li>
  2. <label for="desc"><span class="required">Description</span></label>
  3. <input id="desc" name="desc"  type="text" class="text required"  disabled="disabled"/>
  4. </li>

please somebody help me
Apr 25 '12 #1
Share this Question
Share on Google+
21 Replies


Dormilich
Expert Mod 5K+
P: 8,639
but document.write() opens a new window how to avoid it ?
document.write() doesn’t open a new window (that’s window.open()). it recreates the page if used after page load.
Apr 25 '12 #2

P: 14
thanks for the reply. but no luck, when i tried with document.write() it vanishes the details of current window and displays the image in new window. please let me know is there any other way to do this ?
Expand|Select|Wrap|Line Numbers
  1.  document.URL = "../images/sunny.gif";
  2.                                                  document.images.src = "../images/t-showers.gif";
i have tried with above code also but still no luck.. please help me.
Apr 26 '12 #3

Dormilich
Expert Mod 5K+
P: 8,639
but no luck, when i tried with document.write() it vanishes the details of current window and displays the image in new window.
that’s what I said with "recreating the page".


i have tried with above code also but still no luck
of course, document.URL is read-only (and wouldn’t be an image either) and document.images is a List, not an image element.

what you would need to do is insert an <img> element into the document tree (but since I don’t have enough information about the where and how, I can’t provide even demo code).

besides that, Strings do not have an .innerHTML property. or vice versa, HTMLElements do not equal Strings (unless you get the element stringification right)
Apr 26 '12 #4

P: 14
thanks for the reply. u said as that’s what I said with "recreating the page". could you let me know how to do this ?
what you would need to do is insert an
Expand|Select|Wrap|Line Numbers
  1. <img>
element into the document tree: please let me know how to add ?

and also could anyone post the demo code ? which will help me a lot. thanks in advance
Apr 26 '12 #5

Dormilich
Expert Mod 5K+
P: 8,639
using a simplified example where I insert an image into a document
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Test Centre</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     </head>
  7.     <body>
  8.         <div id="test"></div>
  9.         <script type="text/javascript" src="test.js"></script>
  10.     </body>
  11. </html>
Expand|Select|Wrap|Line Numbers
  1. // test.js
  2. document.getElementById("test").innerHTML = '<img src="pic.png" width="200" height="100" alt="a demo picture">';
  3. // or
  4. // document.querySelector("#test").innerHTML = '<img src="pic.png" width="200" height="100" alt="a demo picture">';
Apr 26 '12 #6

Dormilich
Expert Mod 5K+
P: 8,639
I get a connection error with that.
Apr 26 '12 #8

P: 14
hi dormilich,
10.140.1.193:8090/OfficeInfo/Weather.html

this is how m getting dynamic weather data as expected but in description field i need to add image based on weather condition as if its cloudy or sunny etc
here is my code after modification
Expand|Select|Wrap|Line Numbers
  1. var desc = response.getElementsByTagName("desc").item(0).firstChild?response.getElementsByTagName("desc").item(0).firstChild.data : "";
  2. if(desc == "Cloudy")
  3. {
  4. alert("cloudy");
  5. document.querySelector("#desc").innerHTML = '<img src="images/cloudy.gif" alt="">';          $("input#desc").val(response.getElementsByTagName("desc").item(0).firstChild?response.getElementsByTagName("desc").item(0).firstChild.data : ""); 
  6. }
  7.  


Expand|Select|Wrap|Line Numbers
  1.  
  2. <li>
  3. <div id="desc">
  4. <label for="desc"><span class="required">Description</span></label>
  5. <input id="desc" name="desc"  type="text" class="text required"  disabled="disabled"/>
  6. </div>
  7. </li>
i am new to javascript,i would appreciate your more help, pls help me.
Apr 26 '12 #9

Dormilich
Expert Mod 5K+
P: 8,639
does it work?
Apr 26 '12 #10

P: 14
that is the link for my web page which is after entering the ZIP code which shows details of weather forecast
Apr 26 '12 #11

P: 14
does it work?
no still not working where to use div tag to define id as i am using label tag to define and input tag to get datas dynamically
Apr 26 '12 #12

Dormilich
Expert Mod 5K+
P: 8,639
a little bit more information besides "still not working" would be incredibly helpful.
Apr 26 '12 #13

P: 14
by using
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("test").innerHTML = '<img src="pic.png" width="200" height="100" alt="a demo picture">';
its not navigating the page and not displaying the image as well and other details are displaying normally
Apr 26 '12 #14

Dormilich
Expert Mod 5K+
P: 8,639
above code would require you to actually have an element with the ID of "test" …

and why should it navigate the page (whatever that is supposed to mean*) at all?



* - you can navigate a ship or a vehicle (if you get what I mean)
Apr 26 '12 #15

P: 14
i replaced it with desc
Expand|Select|Wrap|Line Numbers
  1. document.getElementByID("desc").innerHTML = '<img src="images/cloudy.gif" alt="">';
that i am having in
Expand|Select|Wrap|Line Numbers
  1. <input id="desc" name="desc"  type="text" class="text required"  disabled="disabled"/>
id is in "input" tag
Apr 26 '12 #16

Dormilich
Expert Mod 5K+
P: 8,639
did you remember to call it at the right time?

getElementById() not getElementByID(). JS is case-sensitive.
Apr 26 '12 #17

P: 14
oh sorry, used this only getElementById(), only image is not getting displaying i think i am not calling it @ right time, there are no errors also
Apr 26 '12 #18

Dormilich
Expert Mod 5K+
P: 8,639
did you check the error console?
Apr 26 '12 #19

P: 14
yes, no errors. is there any other way to copy the page ? i wanted to copy my webpage.
Apr 26 '12 #20

Dormilich
Expert Mod 5K+
P: 8,639
if you don’t get any errors, the code must work (because only an error can prevent the code from working).

copy the page to where? a public server to access it would be the best for me.
Apr 26 '12 #21

P: 14
yes the webpage is free of errors but not getting the required image in specific location based on the if condition.

i wanted to show you my ui page, here there is no option to copy the page
Apr 26 '12 #22

Post your reply

Sign in to post your reply or Sign up for a free account.