未捕获的Javascript引用错误函数没有定义

Check the Fiddle to see the failure occurring.

检查小提琴以查看故障发生。

When I add Data (Even if I leave it empty) to the text box and try to click "Add" it doesn't do anything.

当我向文本框中添加数据(即使我将其保留为空)并尝试单击“添加”时，它什么都不做。

Opening the Chrome and Firefox console both give me the same error, it says "changeText2()" is not defined.

打开Chrome和Firefox控制台都会产生相同的错误，它说“changeText2()”没有定义。

How can I fix this? I've ran into this error several times and mostly it had really weird workarounds, but I am not sure as to the method for avoiding it or what I'm even doing wrong.

我该怎么解决这个问题呢?我曾多次遇到过这种错误，大多数情况下它都有非常奇怪的解决方法，但我不确定如何避免它，或者我做错了什么。

It seems removing the global variable declarations fixes it most of the time, however, I need them in this case and would rather know why and how this error occurs.

但是，似乎在大多数情况下，删除全局变量声明会修复它，但是，我需要它们在这种情况下，并且更确切地知道为什么会发生这种错误。

Any and all help is greatly appreciated.

非常感谢您的帮助。

Javascript:

Javascript:

var list = document.getElementById('deliveryIdArray');
var names = [];

function changeText2() {
    var deliveryIdentification = document.getElementById('deliveryIdentification').value;
    names.push(deliveryIdentification);//simply add new name to array;
    //array changed re-render list
    renderList();
}

function renderList(){
    while (list.firstChild) {
        list.removeChild(list.firstChild);
    }
    //create each li again
    for(var i=0;i<names.length;i++){
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(names[i]));
        var removeButton = document.createElement('button');
        removeButton.appendChild(document.createTextNode("remove"));
        removeButton.setAttribute('onClick','removeName('+i+')');
        entry.appendChild(removeButton);
        list.appendChild(entry);
    }
}


function removeName(nameindex){
    names.splice(nameindex,1);
    //array changed re-render list
    renderList();
}

function getDeliveries(){
    return names;
}

HTML:

HTML:

<b>Number(s): </b>
    <input id = "deliveryIdentification" name = "deliveryIdentification" type = "text" size = "16" maxlength = "30">

    <!-- Array Area Creation -->
    <input type='button' onclick='changeText2()' value='Add' />

    <ol id="deliveryIdArray">
    </ol>

Fiddle: http://jsfiddle.net/vSHQD/

小提琴:http://jsfiddle.net/vSHQD/

3 个解决方案

#1

In JSFiddle, when you set the wrapping to "onLoad" or "onDomready", the functions you define are only defined inside that block, and cannot be accessed by outside event handlers.

在JSFiddle中，当您将包装设置为“onLoad”或“onDomready”时，您定义的函数仅在该块中定义，并且不能被外部事件处理程序访问。

Easiest fix is to change:

最简单的解决办法是:

function something(...)

To:

window.something = function(...)

#2

Change the wrapping from "onload" to "No wrap - in <body>"

将包装从“onload”更改为“No wrap - in ”

The function defined has a different scope.

定义的函数具有不同的作用域。

#3

If you are using Angular.js then functions imbedded into HTML, such as onclick="function()" or onchange="function()". They will not register. You need to make the change events in the javascript. Such as:

如果你用角。然后js将函数嵌入到HTML中，如onclick=“function()”或onchange=“function()”。他们不会注册。您需要在javascript中创建更改事件。如:

$('#exampleBtn').click(function() {
  function();
});

#1