1

I'm trying to get the values from the inputs in my form with JavaScript. But whenever I hit submit, I either get nothing, 0 or undefined. Mostly undefined. It doesn't seem to get any of the values.

Here's the code

<form id="ecoCalculator">
        <div class="form-group">
            <label for="k0">Start Kapital</label>
            <input type="number" name="k0" class="form-control" id="k0">
        </div>

        <div class="form-group">
            <label for="kn">Slut Kapital</label>
            <input type="number" name="kn" class="form-control" id="kn">
        </div>

        <div class="form-group">
            <label for="x">Rente</label>
            <input type="number" name="x" class="form-control" id="x">
        </div>

        <div class="form-group">
            <label for="n">Terminer</label>
            <input type="number" name="n" class="form-control" id="n">
        </div>

        <div class="ecoButtons">
            <input type="button" value="Udregn" class="btn btn-default" onclick="k0Eco()">
            <input type="reset" value="Ryd" class="btn btn-default">
        </div>

    </form>

    <div class="ecoResult">
        <p id="ecoResult">Resultat</p>
    </div>

</div>

<script type="text/javascript">
        // Public Variables
        var k0 = document.getElementById('k0').value();
        var kn = document.getElementById('kn').value();
        var x = document.getElementById('x').value();
        var n = document.getElementById('n').value();

        // Calculation of Initial Capital
        function k0Eco() {
            // Calculation
            var k0Value = kn / (1 + x) ^ n;
            // Show Result
            document.getElementById("ecoResult").innerHTML = k0;
        }

I've looked around at different questions but haven't found a solution to this yet.

I've tried to change the names of the inputs, having the function only display a single value, but still no result.

Thanks

Improve this question
5
  • you might want to create a submit function that prevents the default behavior so that you can perform your calculations first Commented Feb 27, 2017 at 16:56
  • I don't think you know if you can get values from inputs. Your code only prints the final result. Commented Feb 27, 2017 at 16:56
  • 1
    try value not value(). It's a property not a function. And the script that gets the values runs at page load, so inevitably the fields are blank. You need to move all of it into the k0Eco function, to get the values as they are at that moment. Commented Feb 27, 2017 at 16:57
  • 1
    also do you intend to use the Bitwise XOR for "^" in your formula or what were you intending there? perhaps power Commented Feb 27, 2017 at 17:09
  • The error in chrome developer tools is that function k0Eco() is not defined. So I guess .value or .value() is not the real issue. Commented Feb 27, 2017 at 17:38

3 Answers 3

Reset to default
1

value isn't a function, it's a property. Change

var k0 = document.getElementById('k0').value()

to 

var k0 = document.getElementById('k0').value

Your script also runs on page load, so nothing is filled yet. You need to put the whole thing in a submit handler:

document.getElementById('ecoCalculator').addEventListener('submit', function(e) {
    e.preventDefault();
    // your code here

});

Now remove the inline js from the button and make it type submit:

<input type="submit" value="Udregn" class="btn btn-default" />

And remove the function in your js

var k0 = document.getElementById('k0').value;
var kn = document.getElementById('kn').value;
var x = document.getElementById('x').value;
var n = document.getElementById('n').value;

// Calculation
var k0Value = kn / (1 + x) ^ n;
// Show Result
document.getElementById("ecoResult").innerHTML = k0Value;

Here's a working fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

It still says 'Undefined' when I press submit
Edited the answer @zerovacpls
Now submitting does nothing @baao
0

you need to parse the input value in int. for eg.

// Public Variables
    var k0 = parseInt(document.getElementById('k0').value);
    var kn = parseInt(document.getElementById('kn').value);
    var x = parseIntdocument.getElementById('x').value);
    var n = parseIntdocument.getElementById('n').value);
Improve this answer

1 Comment

.value is not a function on the dom element returned by document.getElementBy you need to remove the parens.
0

  • Use value instead of value(). It is a property not a function.

  • Put your variables inside your function. When page loads you variables are getting the value of the inputs and there is nothing there.

function k0Eco() {
    var k0 = document.getElementById('k0').value;
    var kn = document.getElementById('kn').value;
    var x = document.getElementById('x').value;
    var n = document.getElementById('n').value;

    var k0Value = kn / (1 + x) ^ n;

    document.getElementById("ecoResult").innerHTML = k0Value;
}
  • Put you javascript code inside <head> tag or at least before the button. When you try to fire onclick() event, your function is not created yet.
Improve this answer

5 Comments

Javascript need not be in the head tag. It can be at the bottom of the page before the end 'body' tag. This is recommended for page load speed advantage. Also The error in chrome developer tools is that function k0Eco() is not defined. So I guess .value or .value() is not the real issue.
Terrible comment @user3526204. One of the issues is for sure the use of a property as a function. And the error that you are getting in chrome developer tools is exactly because you are not following the instructions - try put your javascript inside the head tag.
@PaulCastilho, I have not said that is not an issue. But I agree if putting the javascript in the head tag resolves the situation here, it definitely is the solution. However, the accepted answer also discusses using a submit handler and event listener. Also I guess there are many posts out there advocating putting javascript at the end of the body to avoid render blocking.
I focused in solve the problem of the user without changing his code. But for sure this solution is not the best one. I would use jquery.
Yes, you are right. You don't need submit handler or even listener etc. And using .value does solve the issue. But javascript need not be in the head tag. Check it out.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.