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

首先，请确保您将DistanceTracker放在正文之后（即：将其放在最后一个结束ElevationTracker之后），其次，如果您希望用户输入的内容，则应获取元素值。当您将<script>设置为<div>时，您将为其提供DOM元素而不是其值，而应放置：

inc

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

此外，技巧是使用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
}

未定义onclick函数getInc

4 个答案: