JavaScript onClick Parameter says variable is not defined

Question

Uncaught ReferenceError: PAGEHTML is not defined

My Object is defined in my JS why does this return an error? I have other onclicks that I've passed the object name through.

HTML

<button id="addLocation" onclick="insertBefore(PAGEHTML.uarAddLocation, addLocation)">+ Add Location</button>

JS OBJECT

var PAGEHTML = {
    uarAddLocation: `<label for="amountUnusual">Amount of Unusual Activity</label>
        <input id="amountUnusual" class="number" />
        <div class="fourtyFiveWidth inlineBlock">
            <label for="fromDate">Unusual Activity Start Date</label>
            <input id="fromDate" class="datepicker number" />
        </div>
        <div style="margin-left: calc(10% - 4px)" class="fourtyFiveWidth inlineBlock">
            <label for="toDate">Unusual Activity End Date</label>
            <input id="toDate" class="datepicker number" />
        </div>
        <label for="AULocation">Unusual Activity Location</label>
        <input id="AULocation" />`;
};

JS FUNC

function insertBefore(selector, html){
  console.log("selector: "+selector);
  $(html).insertBefore("#"+selector);
};

Is PAGEHTML a global variable? (If would have to be to be accessible from an inline event handler.) — nnnnnn
– nnnnnn, Commented Mar 12, 2016 at 2:32
You are passing PAGEHTML.uarLocation to your function but your object is called PAGEHTML.uarAddLocation — JmJ
– JmJ, Commented Mar 12, 2016 at 2:38
@JmJ I see, I have made the change and still receive the same error — Michael Paccione
– Michael Paccione, Commented Mar 12, 2016 at 4:35

Santiago Hernández · Accepted Answer · 2016-03-12 04:11:16Z

In your onclick:

onclick="insertBefore(PAGEHTML.uarLocation, addLocation)"

You're passing the HTML (PAGEHTML.uarAddLocation) as the selector
addLocation has to be wrapped with quotes
PAGEHTML.uarLocation doesn't exist, but PAGEHTML.uarAddLocation does
Your function has to have a different name, it causes issues with native insertBefore

So it should be like this:

onclick="insertBefor('addLocation', PAGEHTML.uarAddLocation)"

Here's a working snippet:

var PAGEHTML = {
    uarAddLocation: `<label for="amountUnusual">Amount of Unusual Activity</label>
        <input id="amountUnusual" class="number" />
        <div class="fourtyFiveWidth inlineBlock">
            <label for="fromDate">Unusual Activity Start Date</label>
            <input id="fromDate" class="datepicker number" />
        </div>
        <div style="margin-left: calc(10% - 4px)" class="fourtyFiveWidth inlineBlock">
            <label for="toDate">Unusual Activity End Date</label>
            <input id="toDate" class="datepicker number" />
        </div>
        <label for="AULocation">Unusual Activity Location</label>
        <input id="AULocation" />`
};

function insertBefor(selector, html){
  console.log("selector: " + selector);
  $(html).insertBefore("#"+selector);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addLocation" onclick="insertBefor('addLocation', PAGEHTML.uarAddLocation)">+ Add Location</button>

obe · Accepted Answer · 2016-03-12 02:41:52Z

1

Maybe wrap the second parameter in quotes?

<button id="addLocation" onclick="insertBefore(PAGEHTML.uarLocation, 'addLocation')">+ Add Location</button>

EDIT:

Like JmJ noted, the key is also wrong. Should be "uarAddLocation":

<button id="addLocation" onclick="insertBefore(PAGEHTML.uarAddLocation, 'addLocation')">+ Add Location</button>

edited Mar 12, 2016 at 2:41

answered Mar 12, 2016 at 2:32

obe

7,8546 gold badges34 silver badges47 bronze badges

3 Comments

nnnnnn Over a year ago

That may be necessary, and from the definition of insertBefore() I think the arguments are the wrong way around, but it doesn't explain why there would be a reference error that explicitly mentions PAGEHTML.

obe Over a year ago

Right... I would want to see a complete code. Also updated my answer according to JmJ's observation...

Santiago Hernández Over a year ago

why "Maybe wrap the second parameter in quotes"? the second parameter is used as a selector or a jquery wrapper: $(html). <addLocation></addLocation> doesn't exist

Munawir · Accepted Answer · 2016-03-12 03:12:14Z

In addition to the errors mentioned by others

"You are passing PAGEHTML.uarLocation to your function but your object is called PAGEHTML.uarAddLocation"
"Maybe wrap the second parameter in quotes?"

Note this

insertBefore is a built-in javascript method, so you cannot use that name for your function.

var PAGEHTML = {

uarAddLocation: `<label for="amountUnusual">Amount of Unusual Activity</label>
            <input id="amountUnusual" class="number" />
            <div class="fourtyFiveWidth inlineBlock">
                <label for="fromDate">Unusual Activity Start Date</label>
                <input id="fromDate" class="datepicker number" />
            </div>
            <div style="margin-left: calc(10% - 4px)" class="fourtyFiveWidth inlineBlock">
                <label for="toDate">Unusual Activity End Date</label>
                <input id="toDate" class="datepicker number" />
            </div>
            <label for="AULocation">Unusual Activity Location</label>
            <input id="AULocation" />`

};

function insertBefor(selector, html){
  alert(selector);
  $(html).insertBefore("#"+selector);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addLocation" onclick="insertBefor(PAGEHTML.uarAddLocation, 'addLocation')">+ Add Location</button>

goncalopinto · Accepted Answer · 2016-03-12 02:41:19Z

0

This is happening because you must be referencing the object before it gets created. Even if you load the JavaScript at the top of your HTML file, if the HTML executes first this will occur. My suggestion is naming the HTML element inside the javacript block or file after the object is created, or create the HTML block there too.

answered Mar 12, 2016 at 2:41

goncalopinto

4432 silver badges8 bronze badges

Collectives™ on Stack Overflow

JavaScript onClick Parameter says variable is not defined

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related