CODEWITHSUNDEEP
javascripthtml
Eogcloud
Eogcloud

Reputation: 1365

Page refresh, javascript not running

I'm brand new to web programming, never played with it past a basic level and have started a small graphing project with HTML5 canvas. While beginning to build a reallu basic page I've ran into some HTML/JS stuff that's quite simple but I for the life of me cant figure out what's wrong. It wont run for some reason.

I was originally hosting the JS in an external file but in the same directory such as

<script src="numValues.js"></script>

Is this correct or best practice?

My Markup/JS

<!DOCTYPE html>
<html lang="eng">
    <head>
        <META charset="UTF-8"/>
        <title>EZgraph | Pie Chart</title>
        <script type="text/javascript">
 function addFields()
 {
    var numValues = document.getElementById("numValues").value;

    var container = document.getElementById("container");

    while(container.HasChildNodes())
    {
        container.removeChild(container.lastChild);
    }

    for (i=0; i < numValues; i++)
    {
        container.appendChild(document.createTextNode("value " + (i+1)));
        var input = document.createElement("input");
                input.type = "number";
                input.name = "Value" + i;
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
    }
 }
        </script>
    </head>
    <body>
        <div id="inputCountText"></div>
        <form method="post" onsubmit="return addFields()">
            <input type="number" id="numValues" required>
            <input type="submit" value="submit">
        </form>
        <div id="container"></div>
    </body>
</html>

Are there any good IDE's/setups for this kind of work on a Mac? I'm currently using SublimeText.

Upvotes: 0

Views: 1856

Answers (3)

Rafael Herscovici
Rafael Herscovici

Reputation: 17104

Please see my comment on your own answer. Also, you should always check if you get what you need:

 function addFields()
 {
    var returnValue = false;
    var numValues = document.getElementById("numValues").value;
    if (numValues.length != 0)
    {
        var container = document.getElementById("container");
        if (container.length != 0)
        {

            while (container.hasChildNodes())
            {
                container.removeChild(container.lastChild);
            }

            for (i = 0; i < numValues; i++)
            {
                container.appendChild(document.createTextNode("value " + (i+1)));
                var input = document.createElement("input");
                if (input.length > 0)
                {
                    input.type = "number";
                    input.name = "Value" + i;
                    container.appendChild(input);
                    container.appendChild(document.createElement("br"));
                    returnValue = true;
                }
            }
        }
    }
    return returnValue;
 }

Upvotes: 3

Eogcloud
Eogcloud

Reputation: 1365

finally found my problem, it was syntax

container.HasChildNodes()

should be 

container.hasChildNodes()

the page shows the generated fields for an instant but they then dissapear? Why is this?

Upvotes: 2

B. Martin
B. Martin

Reputation: 1163

Have you looked at the console of the Browser? Safari is actually not too bad for debugging. The console should show you where the error is.

I usually use something like the following to test which commands were executed.

console.log('Step 1');

Upvotes: 0

Related Questions