Javascript Uncaught Reference error Function is not defined

Question

When I add Data to the text box and try to click "Add" it does not 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 run 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 to remove 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.

Can someone help me with this:

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>

Answer 1

The easiest fix is to change:

function something(...)

To:

window.something = function(...)

Interested in Full-stack development? Check out the full-stack developer course from Intellipaat.