CODEWITHSUNDEEP
javascript
khwebdesigns
khwebdesigns

Reputation: 13

Help me simplify this JS code

I'm a beginner in JS and want to know a way to simplify this code. There are 7 different divs with iframes, and also 7 different links. I have shown 1 div with iframe and 1 link. I have no idea where to start. Any help would be greatly appreciated.

NOTE: The code works to my needs, but I just need to simplify it (less js code in html, and more in js file).

JavaScript in .js file:

function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";}
}

function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";}
}
 function refFrame()    {
for(var i = 0,e = arguments.length;i < e;i++){
document.getElementById(arguments[i]).src = document.getElementById(arguments[i]).src;
}

}

Div/iframe to be modified:

<div id="r1-box">
<iframe id="frame-box1" class="work" src="youtubelink" width="720" height="405" frameborder="0"></iframe>
</div>

Link to execute JS:

<a id="r1" href="javascript:refFrame('frame-box2','frame-box3','frame-box4','frame-box5','frame-box6','frame-box7');show_visibility('r1-box');hide_visibility('r2-box','r3-box', 'r4-box','r5-box','r6-box','r7-box');">
</a>

Upvotes: 0

Views: 174

Answers (2)

Ben
Ben

Reputation: 5225

As a beginner you shouldn't start using jQuery until you understand Javascript more.

There are a few ways you could simplify this, the most immediate one would be to get the Javascript out of the link and into a Javascript file, or at the top of the page:

window.onload = function() {
    document.getElementById('#r1').onclick = function() {
        refFrame('frame-box2','frame-box3','frame-box4','frame-box5','frame-box6','frame-box7');
        show_visibility('r1-box');
        hide_visibility('r2-box','r3-box', 'r4-box','r5-box','r6-box','r7-box');
    };
    // more...
};

window.onload is an event which fires once the page has - you guessed it - finished loading. There are better ways of doing this, but this is about as basic as it gets. I'd advise you look at javascript domready?

After looking at your code a bit more, I realised all your seven links will do essentially the same thing. You can simply this by using a single function:

function refClick(id) {
    var i = 7,
    frames = [],
    boxes = [];
    while(i--) {
        if(i != id) {
            frames.push('frame-box' + i);
            boxes.push('r' + i + '-box');
        }
    }
    refFrame.apply(null, frames);
    hide_visibility.apply(null, boxes);
    show_visibility('r' + id + '-box');
}

What I'm doing here is looping through 7 times, and building an array of arguments for the refFrame and hide_visibility functions. The id variable tells the loop not to put in that id into the arrays. Using the .apply method, I can apply an array as the arguments and call it normally.

For each of your links, you can apply the following function

document.getElementById('#r1').onclick = function() {
    refClick(1);
};
document.getElementById('#r2').onclick = function() {
    refClick(2);
};
//.....

Upvotes: 2

Steve Wellens
Steve Wellens

Reputation: 20620

You could start using jQuery.

http://jquery.com/

Upvotes: 1

Related Questions