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.
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:
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:
<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/
This question is related to
javascript
html
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:
$('#exampleBtn').click(function() {
function();
});
Change the wrapping from "onload" to "No wrap - in <body>"
The function defined has a different scope.
Source: Stackoverflow.com