未定义onclick函数getInc

Question

我正在创建我的第一个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>

这里是JavaScript：

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

Answer 1

好的，所以我试着用上面汤姆·奥的一些代码自己修复它：

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>

这不管用。在向输入字段提交收入时，没有错误消息，但控制台中没有记录任何内容。

然后，我将Javascript代码重新配置为：

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

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

有人能向我解释一下为什么回报声明能让它起作用吗？

我相信对于你们中一些有经验的人来说，我的缺乏理解一定让你们很痛苦！不过，我下定决心要把这件事搞清楚。

非常感谢

Answer 2

首先确保你有你的

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

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

此外，提示使用addEventListener（）而不是onhtml属性，这是更好的做法。

Answer 3

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

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