Hiding image with id is not working

Question

venkyb47 0 Light Poster

12 Years Ago

I was created a table with <table> tag and id is 'calendarid'. In this each td contains a textbox and an image. Some textboxes contain value and some are empty. I want to hide the image where textbox contains no value(or empty).I have used following java script code to do this, but not working.Here all images are hiding with the following code.

var table = document.getElementById( 'calendarid' ); 
    var inputs = table.getElementsByTagName( 'input' ); 

    //get all inputs inside a table
    for(var z=0;z<inputs.length;z++){    
        var input_id =  String(inputs[z].id); 
        var splitVal = input_id.split("_");

        var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
        var spentHrs = document.getElementById(input_id).value;             

        if(spentHrs == 0) {
            document.getElementById(image_id).style.display = "none";
            }
        else { }    

    }

If I use alert then code is working fine(see below code). But I dont want to show alert. What is the reason for this behaviour ? and how to solve this?

var table = document.getElementById( 'calendarid' ); 
        var inputs = table.getElementsByTagName( 'input' ); 

        //get all inputs inside a table
        for(var z=0;z<inputs.length;z++){    
            var input_id =  String(inputs[z].id); 
            var splitVal = input_id.split("_");

            var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
            var spentHrs = document.getElementById(input_id).value;             
                **alert(spentHrs);**
            if(spentHrs == 0) {
                document.getElementById(image_id).style.display = "none";
                }
            else { }    

        }

javascript

Edited 12 Years Ago by venkyb47 because: to give more clarity

5 Contributors
10 Replies
142 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by venkyb47

gon1387 22 Newbie Poster

12 Years Ago

Hi venkyb47,

Can you put your script at the end of the body tag. Like this:

<body>

    ... some wierd HTML stuff


    <script>

    ...put your javascript here

    </script>
</body>

Then tell me if this works.

radhakrishna.p 29 Posting Whiz in Training

12 Years Ago

can you place your html code here? (if no one object in this forum)
so that i will answer your question very soon.

Edited 12 Years Ago by radhakrishna.p because: for more clarity on the problem

radhakrishna.p 29 Posting Whiz in Training

12 Years Ago

instead of line15 at userpage.php
try to plcae the following code

<script type="text/javascript"> setTimeout(your_function_name,3000) </script>

and let me know the status after modifying the code

and also there will be some synchronization problem with the code which is relating (at line 6 ) to the json data

please first you try to replace code then we will sort out the answer

Edited 12 Years Ago by radhakrishna.p because: giving clarity on the problem

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

venkyb47 0 Light Poster · Answer 1 · 2012-12-04T08:32:22+00:00

I have written js code on .js file and html code is inside .php file. I am calling java script code on php page load.

venkyb47 0 Light Poster · Answer 2 · 2012-12-04T09:14:32+00:00

userpage.php

<table cellpadding="0" cellspacing="0" class="calendar" id="calendarid">
<tr>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$mon.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$mon.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$tue.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$tue.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$wed.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$wed.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$thu.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$thu.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$fri.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$fri.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$sat.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$sat.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$sun.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$sun.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
</tr>
</table> 

    echo "<SCRIPT LANGUAGE='javascript'>loadData();</SCRIPT>";

Like this when form loads first table was drawn with textboxes and image.After that loaddata() function will be called.Some textboxes contain value like 3.40 or 2.00 only decimal value and I try to hide image in which td textbox doesnot contain value.

   globalcode.js  \\java script file

function loadData()
{

    \\ here json code to get value and place it in corresponding textbox.

    /* get all input id inside a table */
var table = document.getElementById( 'calendarid' ); 
    var inputs = table.getElementsByTagName( 'input' ); 
    //get all inputs inside a table
    for(var z=0;z<inputs.length;z++)
    {    
        var input_id =  String(inputs[z].id); 
        var splitVal = input_id.split("_");
        var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
        var spentHrs = document.getElementById(input_id).value;             
        if(spentHrs == 0) {
            document.getElementById(image_id).style.display = "none";
            }
        else { }    
    }
}

AleMonteiro 238 Can I pick my title? · Answer 3 · 2012-12-05T00:33:46+00:00

Another option is to execute the function on page load, like this:

window.onload = function() {
    loadData();
};

Just a suggestion, instead of concat the ID's in different orders for the input and for img, wouldn't it be easier to add a sufix?
IE.:

// Set IDs
<td class="calendar-day">
    <input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$mon.'"  class="timetracktb" />
    <img id="'.$parentID.'_'.$activityid.'_'.$mon.'_IMG" src="phpimages/trash.png" title="delete timelog" alt="trash icon"  />
</td>

// And to get the Img
var inputId = inputs[i].id;
var imgId = inputId + '_IMG';

Another thing, you don't have to add closing tags for <input> and <img>, they can close themselfs, like <img id="a" /> and <input id="b" />

Also, avoid using those inline styles. Use the css classes that you already have.

gon1387 22 Newbie Poster · Answer 4 · 2012-12-05T02:02:55+00:00

AleMonteiro, got the best option for executing a script after page loads.

Although, here;s another option if you're looking for executing scripts in different document states.

document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        // ...
        // Call your function here or do something
        // ...
    }
};

Or, placing your script at the end of the Body tag.
Anyway, it's your choice, it depends on what you're doing or strategy.

Let us know if you've found and fixed the bugs or still needs a hand.

lambing 0 Light Poster · Answer 5 · 2012-12-05T03:38:46+00:00

I agree to AleMonteiro and gon1387, you should try using what they suggested. Make sure the elements are loaded first before manipulating them.

radhakrishna.p 29 Posting Whiz in Training · Answer 6 · 2012-12-06T09:35:53+00:00

can you show how you get the json data to your page?

i think thats doing the major part of your problem

check once whether you getting json data in synchronization mode or not

venkyb47 0 Light Poster · Answer 7 · 2012-12-06T12:09:38+00:00

Thanks to all.
I was changed code like that by default I make image as display none using css. After getting json data in java script I make image as display block by checking condition.Now code works fine.
Thanks for your reply.