未定义onclick函数getInc

Question

I am creating my first web app and have run in to an issue pretty early on!

I have created a function which extracts the information that the user keys into the HTML input field. The way it should work is that when the user enters their income and clicks the submit button, the income is stored in a variable for me to use throughout the rest of my JavaScript code. Looking at the console log, the function is coming up as 'not defined'.

I appreciate the code is probably not very clean but I just want to get it working as it's my first small project!

Any ideas where I am going wrong?

Here's the HTML:

<div class="row input-1">           
    <label for="Gross Annual Salary">£</label>
    <input type="number" name="Gross Annual Salary" id="Ann-Sal" placeholder="Gross Annual Salary" required>
    <input type="button" class="submit-btn" value="Submit" onclick="getInc();">                                              
</div>

Here's the JavaScript:

function getInc() {
    var inc = document.getElementById("Ann-Sal");
}

Answer 1

I remove semiclon from onclick end and it works

 <div class="row input-1"> <label for="Gross Annual Salary">£</label> <input type="number" name="Gross Annual Salary" id="Ann-Sal" placeholder="Gross Annual Salary" required> <input type="button" class="submit-btn" value="Submit" onclick="getInc()"> </div> <script> function getInc() { console.log('works'); var inc = document.getElementById("Ann-Sal"); } </script> 

 <script> function getInc() { console.log('works'); var inc = document.getElementById("Ann-Sal"); } </script> <div class="row input-1"> <label for="Gross Annual Salary">£</label> <input type="number" name="Gross Annual Salary" id="Ann-Sal" placeholder="Gross Annual Salary" required> <input type="button" class="submit-btn" value="Submit" onclick="getInc()"> </div> 

Answer 2

First of all make sure you have your <script> after the body (ie: put it after the last closing <div> ), secondly if you want to what the user typed in you should get the elements value. When you set inc equal to document.getElementById("Ann-Sal"); you are giving it the DOM element instead of the it's value instead you should put:

function getInc() {
    var inc = document.getElementById("Ann-Sal");
}

Then you will get the value the user inputted to the code.

Also, a tip use addEventListener() instead of the onclick attribute, it's better practice.

Answer 3

Ok, so I tried to fix it myself using some of Tom O's code above here:

var buttonEl = document.querySelector('input[type="button"]');

var inputEl = document.getElementById("Ann-Sal");

var annInc;

function clickHandler() {

    annInc = parseFloat(inputEl.value);
    console.log(annInc);
}

buttonEl.addEventListener('click', clickHandler);

HTML:

<div class="row input-1">

                        <label for="Gross Annual Salary">£</label>
                        <input type="number" name="Gross Annual Salary" id="Ann-Sal" placeholder="Gross Annual Salary" required>
                        <input type="button" class="submit-btn" value="Submit">


                    </div>

This didn't work. There was no error message but nothing was logged to the console when submitting an income into the input field.

I then reconfigured the Javascript code to this:

var buttonEl = document.querySelector('input[type="button"]');

var inputEl = document.getElementById("Ann-Sal");

var annInc;

function clickHandler() {
    if (!inputEl.value.length) {
        console.error('A salary is required!');
        return;
    }

    annInc = parseFloat(inputEl.value);

    console.log(annInc);
}

buttonEl.addEventListener('click', clickHandler);

This then worked. I didn't use the if statement to validate the users input previously because I used 'required' in the input element within my HTML code which basically does the same thing right? So i'm guessing the reason why the code wasn't working because the 'return' statement wasn't used?

Would someone be kind enough to explain to me why the return statement enabled this to work?

I'm sure for some of you experienced guys, my lack of understanding must be painful for you! I am super determined to get my head around this though.

Many thanks

Answer 4

Besides the other answers, I just wanna point it out that is missing the .value in your function, otherwise, you won't get the value.

function getInc() {
    var inc = document.getElementById("Ann-Sal").value
}