如何从输入表单中获取返回值？

Question

<form>

        <input type="number" placeholder="rows" min="1" max="300" id ="RowInput" value="" oninput="rowValue()">

        <p>x</p>

        <input type="number" placeholder="columns" min="1" max="300" id="ColumnInput" value="" oninput="columnValue()"> 

        <input type="submit" id="Submit" value="" onsubmit="getGridValue()" >

      </form>

let tile = document.getElementById("tile")

let rowInput = ''

let columnInput = ''

let gridLength = ''

function rowValue() {

    rowInput = document.getElementById('RowInput').value

}

function columnValue() {

    columnInput = document.getElementById('ColumnInput').value 

}

function getGridLength() {

    gridLength = columnInput * rowInput

}

alert(gridLength)

所以我要做的是通过从 columnInput 和 rowInput 获取值并使用它们来获取数字来更新 gridLength。我使用 oninput 事件监听器来做到这一点，尽管我不确定它是否真的将用户输入作为数字返回。然后当用于将它们相乘时，它们根本不会影响 gridLength 变量。我不明白我做错了什么，因为这个想法似乎很简单。

Answer 1

认为唯一引起您问题的是onSubmit。它应该出现在表单元素内，而不是输入 type="submit" 元素内。无论哪种方式，我都做了一些修改和测试，下面的工作就像你想要的那样：<form onsubmit="getGridLength();">&nbsp; &nbsp; <input type="number" placeholder="rows" min="1" max="300" id ="RowInput" value="" oninput="rowValue();">&nbsp; &nbsp; <p>x</p>&nbsp; &nbsp; <input type="number" placeholder="columns" min="1" max="300" id="ColumnInput" value="" oninput="columnValue();">&nbsp;&nbsp; &nbsp; <input type="submit" id="Submit" value=""></form><script>var tile = document.getElementById("tile");var rowInput;var columnInput;var gridLength;function rowValue() {&nbsp; &nbsp; rowInput = document.getElementById('RowInput').value;}function columnValue() {&nbsp; &nbsp; columnInput = document.getElementById('ColumnInput').value;}function getGridLength() {&nbsp; &nbsp; gridLength = columnInput * rowInput&nbsp; &nbsp; alert(gridLength);}</script>除此之外，我建议使用逗号分隔符 (;) 结束每个 Javascript 命令，就像我在上面的代码中所做的那样。在您将要使用的下一个编程语言上，这对您来说也会更容易，因为它们中的大多数都需要在命令结束时使用它。

Answer 2

您可以尝试如下代码：function rowValue() {&nbsp; &nbsp; rowInput = document.getElementById('RowInput').value;&nbsp; &nbsp; getGridLength();}function columnValue() {&nbsp; &nbsp; columnInput = document.getElementById('ColumnInput').value;&nbsp; &nbsp; getGridLength();}function getGridLength() {&nbsp; &nbsp; gridLength = columnInput * rowInput;&nbsp; &nbsp; console.log(gridLength);}如果需要，您可以将 console.log 更改为警报，但 console.log 更好。