Function parameters not working

Question

I'm still in the learning phase of javascript so I'm hoping there's a simple fix to this.

I have an image map area that'll run a javascript function onclick.

Here's what I have:

Relevant HTML for Area Mapping:

<img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
<map id="20keys" name="20keys">
    <area shape="circle" alt="Key 1" title="Key 1" coords="42,54,32" href="#" name="key1area" onclick="keySelected(1);"/>
</map>

Relevant HTML for destination fragment:

<div data-role="dialog" id="keyPopup" data-theme="b">

    <div data-role="header">
        <h1 id="keyHeader"><!--Key Description Here --></h1>
    </div> <!-- /header -->

    <div data-role="content">
        <p><a id="summaryButton" href="#pdfReader" data-role="button" data-ajax="false" onclick="pdfSelected('summary');">Summary of Key <!--Key Number Here --></a></p>
        <p><a id="manualButton" href="#pdfReader" data-role="button" data-ajax="false" onclick="pdfSelected('manual');">View Key <!--Key Number Here --> Manual</a></p>
        <p><a id="interactionsButton" href="#pdfReader" data-role="button" data-ajax="false" onclick="pdfSelected('interactions');">Interaction of Key <!--Key Number Here --> with Other Keys</a></p>
    </div> <!-- /content -->

    <div data-role="footer">

        <p class="margin">
            <a href="#home" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        </p>

    </div> <!-- /footer -->
</div> <!-- /#keyPopup -->

Relevant Javascript:

var keyNumber = 0;

function keySelected(key) {
    keyNumber = key;
    //Alert 1
    if (keyNumber === 1) {
        document.getElementbyId('keyHeader').innerHTML = 'Key 1 - Description';
        document.getElementbyId('summaryButton').innerHTML = 'Summary of Key 1';
        document.getElementbyId('manualButton').innerHTML = 'Manual of Key 1';
        document.getElementbyId('interactionsButton').innerHtml = 'Interaction of Key 1 with Other Keys';
            //Alert 2
    }
}

If I include a window.alert("test"); @ "//Alert 1" it'll run but not at "Alert 2", Any ideas on how to make it run properly?

Let me know if I've let out any crucial details that may have something to do with this. Thanks...

As far as i know, If the js function is in the first page, You can't access the elements in another page inside it, If the js function is in the other html page, You can't trigger that function from current page.. — T J, May 27 '14 at 07:09
You enabled href and onClick at the same time. Haven't tried it yet, but [this link](http://stackoverflow.com/questions/14867558/html-tag-a-want-to-add-both-href-and-onclick-working) might help. — springrolls, May 27 '14 at 07:10
@TJ, the second page is in the same html document as the first page — Barry Michael Doyle, May 27 '14 at 07:19
href is an onclick event, but you can embed an onclick into a href — a coder, May 27 '14 at 20:14

score 0 · Accepted Answer · answered May 28 '14 at 22:14

0

Problem that I didn't was simple...

document.getElementByID()

Sorry about that...

answered May 28 '14 at 22:14

Barry Michael Doyle

9,333
30
83
143

Function parameters not working

1 Answers1