Using links from one page to link to different scripts from another page

Question

Okay so I'm pretty basic when it comes to codes but we have to make a webpage for my computer science class at school, one section including previous class schedules. I'll simplify it to this: I have a navigation bar across the top and one option (schedules) has a drop down menu to a few sub-options (past years).If you click the main option, it links to a page (schedules.html) where there are buttons.Those buttons run a simple script of displaying pictures of previous class schedules that are embedded right below the buttons [so far all of this works how I want it to]

What I can't find out how to do is make the drop-down options (past years) link to the schedules page, then run the script of displaying the picture once it's loaded. Again, it's probably because I'm really new to this. But here's what I have:

HTML


         <li><a href="schedules.html">Class Schedules</a>
            <ul>
               <li><a href="?">2015</a></li> 

<!--want to happen: when select a year, loads schedule page then loads the schedule for that year, -->

               <li><a href="?">2014</a></li>
               <li><a href="?">2013</a></li>
               <li><a href="?">2012</a></li>
            </ul>         
         </li>

The buttons to display the schedules I set in a simple table:

<tr> 
    <td>2015</td>
    <td><input type="button" value="Fall"onClick="pic1()"/></td>
    <td><input type="button" value="Spring"onClick="pic2()"/></td>
</tr>

And the script for the pictures:

<script type = "text/javascript">
    function pic1() /*fall 2015*/
    {
        document.getElementById("schedule").src = "fall15.png";
    }

    function pic2() /*spring 2015*/
    {
        document.getElementById("schedule").src ="spring15.png";
    }

etc...

<img src = "" id = "schedule"/> <!--place where the image goes-->

If this has been answered somewhere, I apologize. I looked for a few days but I'm not sure what it is I'm looking for. I didn't include the CSS code in here because I didn't think it would affect the answer, but the CSS is linked to a style sheet if that's worth anything.

score 1 · Accepted Answer · answered Nov 19 '15 at 06:42

I'm not sure what you're really looking for as your example has two images for 2015 however if you wanted to separate them this would work (untested).

<body onload="checkYear()">

links would be:
<a href="schedules.html?year=15&season=fall">2015 Fall</a>
<a href="schedules.html?year=15&season=spring">2015 Spring</a>

<script type="text/javascript">
function checkYear(){
    var yearVal = getParameterByName('year');
    var seasonVal = getParameterByName('season');
    if(yearVal && seasonVal){
        document.getElementById("schedule").src = (seasonVal + yearVal + '.png');
    }
}

/*http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript*/
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
       results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

score 1 · Answer 2 · edited May 23 '17 at 11:51

one of the ways of doing this is by passing parameters through the URL and then reading them in your javascript file

pass variables through the url like year=2015 or which ever you deem suitable and then read it in your javascript with location.search.split('year=')[1] which gives you the parameter you need.

then use an if else ladder to decide which images will be displayed depending on the year parameter.

inside the html file have this

<li><a href="schedules.html">Class Schedules</a>
    <ul>
        <li><a href="schedules.html?year=2015">2015</a></li> 
        <li><a href="schedules.html?year=2014">2014</a></li>
        <li><a href="schedules.html?year=2013">2013</a></li>
        <li><a href="schedules.html?year=2012">2012</a></li>
    </ul>         
</li>

in your schedules.html file have this

<tr> 
    <td id="year">Images</td>
    <td><input type="button" value="Fall"onClick="pic1()"/></td>
    <td><input type="button" value="Spring"onClick="pic2()"/></td>
</tr>  
<br/><br/>
<img src = "" id = "schedule"/>
<script>

    var param = location.search.split('year=')[1];

    if(param == 2015){
        document.getElementById("schedule").src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=2015 image&w=150&h=150";
    }else if(param == 2014) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2014 image&w=150&h=150";
    }else if(param == 2013) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2013 image&w=150&h=150";
    }else if(param == 2012) {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=2012 image&w=150&h=150";
    }


    function pic1() {
        document.getElementById("schedule").src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=fall&w=150&h=150";
    }

    function pic2() {
        document.getElementById("schedule").src ="https://placeholdit.imgix.net/~text?txtsize=33&txt=spring&w=150&h=150";
    } 

</script>

credit

Using links from one page to link to different scripts from another page

2 Answers2