Javascript 未定义onclick函数getInc

我正在创建我的第一个web应用程序，很早就遇到了一个问题

我创建了一个函数，用于将用户键入的信息提取到HTML输入字段中。它的工作方式是，当用户输入他们的收入并单击submit按钮时，收入存储在一个变量中，供我在JavaScript代码的其余部分中使用。 查看控制台日志，函数显示为“未定义”

我欣赏代码可能不是很干净，但我只是想让它工作，因为这是我的第一个小项目

你知道我哪里出错了吗

以下是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>

---

我从onclick端移除semiclon，它就工作了

£
函数getInc（）{
console.log（'works'）；
var inc=document.getElementById（“Ann Sal”）；
}

首先，确保您的

位于正文之后（即：将其放在最后一次关闭

之后），其次，如果您想知道用户键入的内容，您应该获得元素值。当您将

inc

设置为等于

document.getElementById（“Ann Sal”）您给它的是DOM元素，而不是它的值，您应该放：

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

然后您将获得用户输入到代码中的值

另外，使用提示而不是onclick属性，这是更好的练习。
除了其他答案之外，我只想指出，您的函数中缺少
.value
，否则，您将无法获得该值

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

好的，我试着用上面Tom O的一些代码来修复它：

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:

这就奏效了。我以前没有使用if语句来验证用户的输入，因为我在HTML代码中的input元素中使用了'required'，这基本上是正确的吗？所以我猜代码之所以不能工作是因为没有使用“return”语句

有没有人能给我解释一下为什么return语句能让它工作

我敢肯定，对于你们当中一些有经验的人来说，我缺乏理解对你们来说一定很痛苦！不过，我下定决心想办法解决这个问题

非常感谢
您必须确保JavaScript在HTML解析到内存后运行。最好的方法是将
脚本
标记放在结束
正文
标记（
）之前。最可能的问题是javascript和HTML的链接方式。标签在HTML文件中的什么位置？你能把它贴在这里吗？@ScottMarcus在这种情况下位置重要吗？在实际单击之前，
onclick
的值不会被解析。此时，无论脚本标记位于何处，都应该定义
getInc
。我的猜测是，它是一个外部js文件，实际上无法加载。在onclick=·getInc（）的html中有一个分号“这里不应该有分号。分号在这里没有区别。您的答案假设
脚本
元素在HTML之后，这很可能不是问题所在。不，您不需要删除分号。@ScottMarcus已修复。脚本标记不应该在
正文
之后。它应该在e结束
body
tag。请注意你答案中的措辞。感谢你的帮助，我明天会尝试你的建议，让你知道我的进展。很高兴看到我得到的所有有用的回复，非常感谢！
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);

<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>

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);