未定义onclick函数getInc

Question

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

我创建了一个函数，该函数可将用户键入的信息提取到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> ），其次，如果您希望用户输入的内容，则应获取elements值。 当您将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
}