...

View Full Version : Splitting off JavaScript to a script area



FlashDance
10-02-2011, 03:43 PM
I am really new to JavaScript, and was following a tutorial that was using everything inline (probaby as its less confusing for the noob). Now I want to split it off into a script area, like my CSS has been.

I have:


<SPAN onclick="document.getElementById('glance').style.display='block';document.getElementById('front').style.displ ay='none';">


Is something like this valid (this is a guess BTW)?


<SCRIPT type="text/javascript">

function getElementById('glance') {

.style.display='block';
}

function getElementById('front') {
.style.display='none';
}
</SCRIPT>
<SPAN onclick="document.getElementById('glance'); document.getElementById('front')"> ... </SPAN>

... or should function be document in the script area and document not be present in the SPAN attribute?

... Better yet, is there a way to put both the 'glance' and 'front' together like this:


<SCRIPT type="text/javascript">
function getElementById ('glance') {
.style.display='block';
getElementById ('front') {
.style.display='none';
}
}
</SCRIPT>

DanInMa
10-02-2011, 04:13 PM
<span onclick="myFunction();">blah</span>
<script type="text/javascript">
function myFunction(){
document.getElementById('glance').style.display='block';
document.getElementById('front').style.display='none'
}
</script>

there are alot of way to do this. my example is the simplest. One note: you should get in the habit of making your element tags lowercase <span> etc... certain doctypes require they be in lowercase to validate properly

Philip M
10-02-2011, 04:16 PM
You seem to be very confused. You cannot give a function the same name as the id of an HTML element.

DanInMa
10-02-2011, 04:22 PM
weird i commented on that but it didnt save the edit

Philip M
10-02-2011, 04:49 PM
One note: you should get in the habit of making your element tags lowercase <span> etc... certain doctypes require they be in lowercase to validate properly

I agree with you entirely - the World Wide Web Consortium (W3C) recommends lowercase tags in HTML 4, and demands lowercase tags in XHTML. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. But to be fair either works fine in HTML.

FlashDance
10-03-2011, 01:35 AM
Thanks for the JavaScript tip.

I am using upper case tags as I am using HTML 4.01. All elements should be upper case, where attributes lower case

I've just plucked a random page out of the spec to show you - they are all upper:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

Elements (UPPER):
http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

Attributes (lower):
http://www.w3.org/TR/1999/REC-html401-19991224/index/attributes.html

FlashDance
10-03-2011, 02:16 AM
So, I built this code, and it doesn't work. Have I missed something?




<SCRIPT type="text/javascript">
function selector('glancej') {
document.getElementById('glance').style.display='block';
document.getElementById('front').style.display='none';
}
function selector('frontj') {
document.getElementById('glance').style.display='none';
document.getElementById('front').style.display='block';
}
</SCRIPT>

<SPAN onclick="selector('glancej');">GLANCE</SPAN>
<SPAN onclick="selector('frontj');">FRONT</SPAN>

<IMG alt="" class="glance" id="glance" src="glance.png">
<IMG alt="" class="front" id="front" src="front.png">

FlashDance
10-03-2011, 03:23 AM
I wrote this up and it doesn't work. Where have I stuffed up?



<SCRIPT type="text/javascript">
function selector('glancej') {
document.getElementById('glance') {style.display='block'};
document.getElementById('front') {style.display='none'};
}
function selector('frontj') {
document.getElementById('glance') {style.display='none'};
document.getElementById('front') {style.display='block'};
}
</SCRIPT>

<SPAN onclick="selector('glancej');">GLANCE</SPAN>
<SPAN onclick="selector('frontj');">FRONT</SPAN>

<IMG alt="" class="glance" id="glance" src="glance.png">
<IMG alt="" class="front" id="front" src="front.png">

FlashDance
10-03-2011, 07:47 AM
Awesome. I figured it out. Solved! :)

function glancej() {

document.getElementById('glance').style.display='block';

document.getElementById('front').style.display='none';

}

function frontj() {

document.getElementById('glance').style.display='none';

document.getElementById('front').style.display='block';



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum