onclick 函数 getInc 未定义

Question

我正在创建我的第一个网络应用程序，并且很早就遇到了问题！

我创建了一个函数，该函数将用户键入的信息提取到 HTML 输入字段中。它应该工作的方式是，当用户输入他们的收入并单击提交按钮时，收入将存储在一个变量中，供我在我的 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

我从 onclick 端删除了分号，它可以工作

<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

首先确保在正文之后有<script>（即：把它放在最后一个关闭<div> 之后），其次，如果你想要用户输入的内容，你应该得到元素值。当您将inc 设置为等于document.getElementById("Ann-Sal"); 时，您给它的是DOM 元素而不是它的值，您应该输入：

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

然后你会得到用户输入到代码中的值。

另外，提示使用addEventListener() 而不是 onclick 属性，这是更好的做法。

Answer 3

好的，所以我尝试使用上面的一些 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：

<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'语句？

有人可以向我解释为什么 return 语句可以使它起作用吗？

我敢肯定，对于你们中的一些有经验的人来说，我缺乏理解一定会让你们很痛苦！不过，我非常决心解决这个问题。

非常感谢

Answer 4

除了其他答案，我只想指出您的函数中缺少.value，否则您将无法获得价值。

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