CODEWITHSUNDEEP
javascriptonclick
Michael Paccione
Michael Paccione

Reputation: 2827

JavaScript onClick Parameter says variable is not defined

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);
};

Upvotes: 0

Views: 5344

Answers (4)

Santiago Hern&#225;ndez
Santiago Hern&#225;ndez

Reputation: 5646

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>

Upvotes: 2

Munawir
Munawir

Reputation: 3356

In addition to the errors mentioned by others

  1. "You are passing PAGEHTML.uarLocation to your function but your object is called PAGEHTML.uarAddLocation"

  2. "Maybe wrap the second parameter in quotes?"

Note this

  1. 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>

Upvotes: 1

obe
obe

Reputation: 7806

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>

Upvotes: 1

goncalopinto
goncalopinto

Reputation: 443

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.

Upvotes: 0

Related Questions