Javascript help- headings need to turn red when clicked

technotool · December 10, 2008

I am trying to modify some code so that the clickable headings act like css tabs (color changes to red if active div is displayed) using javascript. I have added an id to each clickable span element and put that into an array. When I try to incorporate the colorChange function into the function show() below. I cannot seem to get it right. I added the following code to the functions show():

 
colorChange(sectionHeadings[i], 'red');

as below but it is not working. Any suggestions as to how I can turn the headings red when they are clicked to give the viewer a richer experience. (hehe-that sounds funny)

much thanks

technotool.

<script type="text/javascript">
var sections = new Array('partOne', 'partTwo', 'partThree', 'partFour');
var sectionsHeadings = new Array('headingOne', 'headingTwo', 'headingThree', 'headingFour');
function init() {
    show('partOne');
    colorChange(sectionsHeadings[0], 'red');
    document.getElementById('subj_txtOutput').focus();

}
function show(section) {
    for (var i = 0; i < sections.length; i++) {
        if (sections[i] == section) {
            document.getElementById(sections[i]).style.display = 'block';
            colorChange(sectionHeadings[i], 'red');
        } else {
            document.getElementById(sections[i]).style.display = 'none';
            
        }
    }
}

function colorChange(id, val)
      {
           var e = document.getElementById(id);
           if(!(e))
           {
                alert("This change is not possible!");
                return(false);
           }
           e.style.color = val;
           return(true);
      } 


</script>
<html>

<body onload="init();">

<span id="headingOne" onClick="show('partOne');">HeadingOne</span> |
<span id="headingTwo" onClick="show('partTwo')">HeadingTwo</span> |
<span id="headingThree" onClick="show('partThree')">HeadingThree</span> |
<span id="headingFour" onClick="show('partFour')">HeadingFour</span>

<div id="partOne">stuff</div>
<div id="partTwo">more stuff</div>
<div id="partThree">even more stuff</div>
<div id="partFour">too much freakin' stuff already</div>

<html>

Psycho · December 10, 2008

It worked for me after I fixed one typo. You define the array "sectionsHeadings", but in the function show() you refer to it as "sectionHeadings" (without the s).

Your code is malformed as well. The last HTML tag is an opening tag, not a closign tag. Also, you should move the javascript code within the HTML tags - I would suggest putting it within HEAD tags as well.

But, I don't know if your code is doing what you really want it to do as the logic seems awkward to me.

Psycho · December 10, 2008

Try this. It doesn't require you to create the two arrays for managing the elements - and I think it works as you would want. But I'm just guessing on that part.

<script type="text/javascript">

function init()
{
    show(1);
//    document.getElementById('subj_txtOutput').focus();
}

function show(section)
{
    var sec_count = 0;
    var sec_no = 1;

    while (document.getElementById('heading-'+sec_no))
    {
        headObj = document.getElementById('heading-'+sec_no);

        if (sec_no == section)
        {
            headObj.style.color = (headObj.style.color !='#ff0000') ? '#ff0000' : '#000000';
        }

        if (headObj.style.color=='#ff0000')
        {
            sec_count++;
        }
        sec_no++;
    }

    sec_no = 1;
    while (document.getElementById('part-'+sec_no))
    {
        document.getElementById('part-'+sec_no).style.display = (sec_no==sec_count) ? 'block' : 'none';
        sec_no++;
    }

    return;
}

</script>

<html>


<body onload="init();">

<span id="heading-1" onClick="show(1);">HeadingOne</span> |
<span id="heading-2" onClick="show(2);">HeadingTwo</span> |
<span id="heading-3" onClick="show(3);">HeadingThree</span> |
<span id="heading-4" onClick="show(4);">HeadingFour</span>

<div id="part-1" style="display:none;">stuff</div>
<div id="part-2" style="display:none;">more stuff</div>
<div id="part-3" style="display:none;">even more stuff</div>
<div id="part-4" style="display:none;">too much freakin' stuff already</div>

<html>

technotool · December 11, 2008

Now that you found the typo. the code is working perfectly as a basic javascript tab system. Each heading turns red when clicked and shows the corresponding div. My brain is too small to understand your code. sorry. but thanks again for your help.

<script type="text/javascript">
var sections = new Array('partOne', 'partTwo', 'partThree', 'partFour');
var sectionHeadings = new Array('headingOne', 'headingTwo', 'headingThree', 'headingFour');
function init() {
    show('partOne');
    colorChange(sectionsHeadings[0], 'red');
    document.getElementById('subj_txtOutput').focus();
}

function show(section) {
    for (var i = 0; i < sections.length; i++) {
        if (sections[i] == section) {
            document.getElementById(sections[i]).style.display = 'block';
            colorChange(sectionHeadings[i], 'red');
        } else {
            document.getElementById(sections[i]).style.display = 'none';
            colorChange(sectionHeadings[i], 'black');
        }
    }
}

function colorChange(id, val){
           var e = document.getElementById(id);
           if(!(e))
           {
                alert("This change is not possible!");
                return(false);
           }
           e.style.color = val;
           return(true);
} 


</script>
[code]

Sign In

Javascript help- headings need to turn red when clicked

Recommended Posts

technotool

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

technotool

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information