Sum of numbers separated with comma

I am very new to HTML and I've decided to attempt to put what I know into an HTML page that allows you to enter any amount of numbers, separated by commas, and would display the sum of all the numbers below.





Sum of two numbers

Enter any amount of numbers separated by a comma:

Get sum



function sum() {
sumofnums = 0;
nums = document.getElementById("nums").value.split(",");
for (i = 0; i





Are there any bad practices in my code?

HTML or XHTML? Which version? Be clear.

Your file is ambiguous. The usage of the empty element tag syntax * suggests (not mandates) that it's XHTML, whereas the absence of a namespace declaration suggests its not.

I recommend that documents are always clear about whether they're HTML or XHTML. And I recommend XHTML because parsing XHTML is simpler than parsing HTML, and HTML5 is defined in a way that XHTML5 documents are (more or less) a subset of HTML5 documents. The keyword is polyglot syntax.

Maybe in your context it's clear, but there is not sufficient information for us, the reviewers, whether your server would serve it as text/html or application/xhtml+xml.

Note that ` does not sufficiently declare HTML5. The HTML5 specification says that an HTML5 document should have a doctype declaration of the form . But it does not declare that everything that has such a doctype declaration is HTML5. It also does not (and cannot) prevent any other specification from also using the declaration for some other variant of HTML than HTML5. Furthermore, it permits XHTML5 to also use the very same declaration. See this.

I recommend to use the XHTML5 with the polyglot syntax, which is the "common subset" of HTML5 and XHTML5. It is basically HTML5 parsable with an XML parser. I recommend this for multiple reasons.

• The parsing rules of XML are simpler, therefore automated processing of documents with tools such as XSLT is simpler / possible with the XML syntax.

• You can create DTDs or XML Schemas that further validate your syntax. XML Schema with XML namespaces allows you to validate the mix of different XML-based languages such as for example XHTML and SVG within a single document.

(It's a pitty that the guys of WhatWG are so ignorant towards XML and its capabilities. It's a pitty that the guys of WhatWG had to reinvent the wheel and declare HTML5 as a markup language of its own right besides SGML and XML. That was completely unnecessary and it only confuses people, as we can see with this discussion about the .)

Declare encoding

It's recommended to always declare the encoding. And the encoding should be declared within the first 1024 bytes.

There are 4 ways how the server can declare the encoding of a (X)HTML document to the client:



• HTTP Content-Type header: The server would send something like Content-Type: text/html; charset=UTF-8 or Content-Type: application/xhtml+xml; charset=UTF-8 to the client.






• XML declaration (only for XHTML, not HTML), as the first line of the document: .






• Meta element declaring the Content-Type, like this: resp.






• Meta element declaring the Charset, like this:

See this for more information.

Document Outline

The outline of your document looks like this:

• Enter any amount of numbers separated by a comma:

• (level skipped)

• (empty headline)

I doubt that this outline makes sense.

Keep in mind that , etc. are for headlines. If you just want a paragraph with big text but without the semantics of a headline, use a normal paragraph instead and style it with CSS.

Also, skipping levels is not recommended. For a element, the next heading should have a level not greater than N+1.

How to declare the scripting language

The correct way to declare the scripting language on a element is like this:

    // ...

If you know that the User Agent supports HTML5 or behaves as expected, you can actually omit the declaration of the scripting language:


The default, which is used if the attribute is absent, is "text/javascript".

The lang attribute is actually meant for describing the content language, like this:

Hi, Hola, Hallo und Servus!

What you did, actually declares the contents of the element to be in a non-existent natural language named JavaScript.

Naming Conventions

Because JavaScript and Java were somehow born together, they follow identical naming conventions. Which means, we also use camelCase for variables and functions in JavaScript.

Your variable sumofnums should be named sumOfNums.

Local vs Global Variables

In JavaScript, whenever you assign a variable without declaration, it is implicitly global. Local variables need to be declared explicitly, using the var keyword.

You should declare your variables, like this:

var sumOfNums = 0;
var nums = document.getElementById("nums").value.split(",");

The same is true for i.
It can be declared at the for-loop, like in Java:

for (var i = 0; i < nums.length; i++) {
  sumOfNums += parseInt(nums[i]);
}

However, be aware that scopes in JavaScript are only global or function-local. Blocks do not define new scopes for variables.

User Input Validation

If the user inputs crap, you might want to tell the user instead of silently failing. JavaScript supports regular expressions, in case you want to go for that. But anyhow, you want to deal with parseInt()` failing.

JavaScript supports exception handling quite similar to Ja

StackExchange Code Review Q#75257, answer score: 15