JavaScript wont return input element value

Question

I have this input element I am working on. I have the default value set to 'Weight'. After I press a button, the JavaScript calls the function. This function's purpose is to return the value of the input element. But, it returns the default value instead of what is typed into the text box.

CodePen of project.

HTML:

<input type="text" name="value1" onfocus="if (this.value=='Weight') this.value = ''" value="Weight"></input>

JavaScript:

function start(){
 v1 = document.forms["weight"]["value1"].value;
 return v1; 
} 

Note: Variable "v1" was already declared as a variable earlier in the document. But, it was not given a value. Also, the input element is the child of a form element named "weight."

Answer 1

Here's your problem:

document.getElementById("submit").addEventListener("click", start());

Take a closer look. This does not do what you think it does. It should be:

document.getElementById("submit").addEventListener("click", start);

and you should be able to see why that is: start() is first evaluated to undefined by the interpreter, then the returned value undefined is passed to the method EventTarget::addEventListener. Notice how this is clearly not what your intention is.

---

Regarding your code, as I mentioned it contains quite a few code smells.

A lot of global variable declarations

var w1,
    w2,
    v1,
    v2,
    res,
    resVal,
    resValStr; 

Not only you have a lot of variables everywhere, they are global which makes it even worse. Try relocating them in corresponding functions and methods instead.

Mixing codes in HTML tags

On one hand you have

<input type="text" name="value2" onfocus="if (this.value=='Weight') this.value = ''" value="Weight"></input>

but on the other hand you have

document.getElementById("submit").addEventListener("click", start());

This is a bad practice. HTML is for declaring structures, not writing logical codes. In fact, in certain environments such as when building an extension for Chrome, inline JavaScript is strictly prohibited.

Accessing variables outside of the function

function start(){
  w1 = document.forms["weight"]["weight1"].value;
  w2 = document.forms["weight"]["weight2"].value;
  v1 = document.forms["weight"]["value1"].value;
  v2 = document.forms["weight"]["value2"].value;

  //Console Log is for current development. 
  console.log(v1); 
}

This is a great way to create spaghetti code. As time goes, your application will eventually get more and more complex. Accessing variables that are not declared by itself will cause bugs that are hard to debug.