Reputation: 2827
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
Reputation: 5646
In your onclick:
onclick="insertBefore(PAGEHTML.uarLocation, addLocation)"
PAGEHTML.uarAddLocation
) as the selector
addLocation
has to be wrapped with quotesPAGEHTML.uarLocation
doesn't exist, but PAGEHTML.uarAddLocation
doesSo 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
Reputation: 3356
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>
Upvotes: 1
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
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