Question

Uncaught ReferenceError: PAGEHTML is not defined

我的对象在我的JS中定义为什么会返回错误？我有其他onclicks，我已通过对象名称。

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

Answer 1

也许将第二个参数包装在引号中？

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

编辑：

像JmJ所说，关键也是错误的。应该是“uarAddLocation”：

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

Answer 2

除了其他人提到的错误

＆＃34;您正在将PAGEHTML.uarLocation传递给您的函数，但您的对象名为PAGEHTML.uarAddLocation＆＃34;
＆＃34;也许将第二个参数包装在引号中？＆＃34;

请注意

insertBefore是一种内置的javascript方法，因此您无法将该名称用于您的功能。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这种情况正在发生，因为您必须在创建对象之前引用该对象。即使您在HTML文件的顶部加载JavaScript，如果首先执行HTML，也会发生这种情况。我的建议是在创建对象后命名javacript块或文件中的HTML元素，或者也在那里创建HTML块。

Answer 4

在您的onclick中：

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

您将HTML（PAGEHTML.uarAddLocation）作为selector
addLocation必须用引号
PAGEHTML.uarLocation不存在，但PAGEHTML.uarAddLocation确实
您的函数必须使用其他名称，这会导致本机insertBefore

所以它应该是这样的：

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

这是一个工作片段：

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>

JavaScript onClick参数表示变量未定义

4 个答案: