/    Sign up×
Community /Pin to ProfileBookmark

document.getElementbyName??

Copy linkTweet thisAlerts:
May 03.2009

Hi Everyone,

I am trying the acheieve something which I understand is quite simple but to beginner like me its a headache.

Is someone able to point me in the right direction please?

I am trying to achieve a page with many images and an input form that allows the user to select which pictures they want to be visible and hide the others.

I am trying to do it so the javascipt will search all the images, by their name(or even id not bothered which) and then if the name matches that entered in the form then the these pictures are displayed and the others are hidden.

I am getting confused between the getElementbyId , getElementsbyId and type of variable information it is gathering. After echo the result I can only seem to get the number of results and therefore can’t seem to apply a style change to these.

Here is something, very little I know of what I’m working with.

[code]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<script type=”text/javascript”>
function checkit()
{

var imgs=document.getElementsByTagName(“IMG”);
for (var n=0;n<imgs.length;n++)
if (imgs[n].className== document.testform.myinput.value)
{
imgs[n].style.display = ‘hidden’;
}
else
{
imgs[n].style.display = ‘visible’;
}
}
</script>
</head>

<body>

<form name=”testform” onsubmit=”checkit(this)” >
<input type=”text” name=”myinput”>
<input type=”submit” />
<img src=”images/pic.GIF” class=”first”>
<img src=”images/pic2.GIF” class=”second”>
</form >
</body>
</html>
[/code]

Any comments or pointer would be greatfully accepted.

Many Thanks
Adrian

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@TeufelMay 03.2009 — The following functions are available:

[CODE]
document.getElementById(id) // returns a single element with id [i]id[/i]
document.getElementsByTagName(tag) // returns an array of elements with tag [i]tag[/i]
document.getElementsByName(name) // returns an array of elements with name [i]name[/i]
document.getElementsByClassName(class) returns an array of elements with class [i]class[/i] (Opera > 9, Firefox > 3 and IE > 7 only!)
[/CODE]

Take your pick.

Also, "visible" isn't a valid value for style.display

You can use 'block' or simply '' if you just want the default.
Copy linkTweet thisAlerts:
@myminimonsterauthorMay 04.2009 — Thanks for the reply

I have taken into account what you said and have got it to do what I would like.

I still have an issue.

I am changing the style for all images which class name is the same as the form input. It does this ok but after the javascript has finished the 'for' loop it changes the class back and makes the image visible.

Anyone know how to prevent this and which line if any is causing the change back.

<i>
</i>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;script type="text/javascript"&gt;
function checkit()
{


var imgs=document.getElementsByTagName("IMG");
for (var n=0;n&lt;imgs.length;n++)
if (imgs[n].className== document.testform.myinput.value)
{

imgs[n].className = 'noshow' ;
alert('same');


}
else
{
}
}
&lt;/script&gt;
&lt;style&gt;
.noshow
{
display:none;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;form name="testform" onsubmit="checkit(this)" &gt;
&lt;input type="text" name="myinput"&gt;brick or logo
&lt;input type="submit" /&gt;
&lt;img src="images/logo.GIF" class="logo"&gt;
&lt;img src="images/brick.jpg" class="brick"&gt;
&lt;/form &gt;
&lt;/body&gt;
&lt;/html&gt;



Many Thanks

Adrian
Copy linkTweet thisAlerts:
@FangMay 04.2009 — onsubmit="checkit(this); return false;"
Copy linkTweet thisAlerts:
@myminimonsterauthorMay 04.2009 — Thanks Fang,

Do you mind explaining the purpose and action taken by the script when the "return false" is and is not used?

Many Thanks

Adrian
Copy linkTweet thisAlerts:
@FangMay 05.2009 — return false will prevent the natural action of the form occurring - form submission. In your document the submission reloads the document making the images visible.
×

Success!

Help @myminimonster 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.26,
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,
)...