using a single xsl file to display different elements

I have an xml file with the following data:

<BOOKS>
<BOOK>
    <TITLE image="./images/govnahDesign.jpg">Bible</TITLE>
    <CATEGORY>Book</CATEGORY>
    <GENRE>Gospel</GENRE>
    <PRICE>0.00</PRICE>
    <SUMMARY>This is the BOOK of life. The truth and the light.</SUMMARY>
    <REVIEW>This indeed the truth and the light. This BOOK is pure fact no fiction.</REVIEW>
</BOOK> 
<BOOK>
    <TITLE image="./images/govnahDesign.jpg">Scrap Book</TITLE>
    <CATEGORY>Novel</CATEGORY>
    <GENRE>Ghetto Gospel</GENRE>
    <PRICE>19.00</PRICE>
    <SUMMARY>This a message from Guvnah B. UK gospel artist doing it big no long things</SUMMARY>
    <REVIEW>I love this message. It gives life a fresh air and makes you love life.</REVIEW>
</BOOK> 
<BOOK>
    <TITLE image="./images/govnahDesign.jpg">Daddy's Boy</TITLE>
    <CATEGORY>Magazine</CATEGORY>
    <GENRE>Gospel</GENRE>
    <PRICE>2.00</PRICE>
    <SUMMARY>This is for Christians who has a father up in Heaven. He really loves his children.</SUMMARY>
    <REVIEW>This makes me want a father like they talking about. He must be a great father. Great magazine.</REVIEW>
</BOOK>

</BOOKS>

I am currently displaying each in separate xsl files. example: this would be xsl file for categry='Book"

    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
    <xsl:for-each select="BOOKS/BOOK">
    <xsl:if test="CATEGORY='Book'"><!-- Show category NOVEL only -->
    <div class="item">
        <xsl:value-of select="TITLE"/>
        <img>
            <xsl:attribute name="src">
                <xsl:value-of select="TITLE//@image"/>
            </xsl:attribute>
        </img>
        Price: <xsl:value-of select="PRICE"/>
        <button id="view" onclick="javascript:viewBook()">View</button>
    </div>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

My question is, is it possible to have just one xsl file which i can change the value of the category in the if statement when the xsl file opens?

<xsl:if test="CATEGORY='Book'">

I open the xsl file with javascript into a div on the main page.

I have searched for a couple of days now trying to use javascript to pass a value but no avail. Any directions, help and advice would be much appreciated.

Thank You

Addition:

the java script that opens the required xsl file depending on the category name:

var root=xmlDoc.getElementsByTagName("CATEGORY");
    strVal = new Array();
    for (i=0;i<root.length;++i) {
        var title=(root[i].childNodes[0].nodeValue);
            strVal[i]='<li><a href="#" onClick="javascript:Navigate(\''+xslCatFileName+'\')"开发者_JAVA技巧>'+xslCatFileName+'</a></li>';
                    string = string + strVal[i];
    }

    document.getElementById("category").innerHTML+=string;

Here is the Navigation() function the above calls:

function Navigate(catName) {
//create an instance of the DOMDocument object.
var xmlDoc=new ActiveXObject ("Msxml2.DOMDocument.6.0");
var xslDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
var i;
xmlDoc.async=false;
xslDoc.async=false;
//stores the category passed
var xslCatName = catName;
xmlDoc.load("./xml/books.xml");
xslDoc.load("./xml/"+xslCatName+".xsl");
//check wether the process of loading is complete and that there are no errors in the XML document.
if (xmlDoc.readyState == 4 && xmlDoc.parseError.errorCode == 0) {

    var output=xmlDoc.transformNode(xslDoc); //transforms the xml sheet to xslt

    //this clears the div before it loads 
        var y = document.getElementById('showBOOKS'), child;
        while(child=y.firstChild)
        y.removeChild(child);

    document.getElementById("showBOOKS").innerHTML+=output;
}
//if the XML document contains an error, display an error message.
else {
    alert("Failed to load the document. Check wether your XML document is well-formed");
}
}

If the function you are using supports passing parameters to the xsl transform, you can simply define a parameter for that, and call the same xsl using different parameter values:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:param name="CATEGORY" select="Book"/>

<xsl:template match="/">
<xsl:for-each select="BOOKS/BOOK">
<xsl:if test="CATEGORY=$CATEGORY"><!-- Show category NOVEL only -->
<div class="item">
       <xsl:value-of select="TITLE"/>
        <img>
            <xsl:attribute name="src">
                <xsl:value-of select="TITLE//@image"/>
            </xsl:attribute>
        </img>
        Price: <xsl:value-of select="PRICE"/>
        <button id="view" onclick="javascript:viewBook()">View</button>
    </div>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

This is the XSLT side. Are you searching for this?

On the javascript side you need to add the parameter before calling the transform, with something like:

xslDoc.addParameter("CATEGORY", "Novel");

I think you are also using the wrong API for your xslDoc. See this example.

You could include a small xsl file which contains the value:

<xsl:variable name="category" select="'Book'"/>

and in the if statement use it:

<xsl:if test="CATEGORY=$category">