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

x

let tile=document.getElementById（“tile”）
让rowInput=“”
让columnInput=“”
设gridLength=“”
函数rowValue（）{
rowInput=document.getElementById（'rowInput'）。值
}
函数columnValue（）{
columnInput=document.getElementById（'columnInput'）。值
}
函数getGridLength（）{
gridLength=columnInput*rowInput
}
警报（网格长度）

---

所以我要做的就是更新gridLength，从columnInput和rowInput中获取值，并使用它们获取一个数字。我使用了OnInputEventListeners来实现这一点，尽管我不确定它是否真的以数字形式返回用户输入。然后，当使用它们相乘时，这两个变量根本不会影响gridLength变量。我不明白我做错了什么，因为这个想法似乎很简单。

您可以尝试以下代码：

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
    getGridLength();
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
    getGridLength();
}

function getGridLength() {
    gridLength = columnInput * rowInput;
    console.log(gridLength);
}

---

如果需要，您可以将console.log更改为alert，不过console.log更好。

您可以尝试以下代码：

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
    getGridLength();
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
    getGridLength();
}

function getGridLength() {
    gridLength = columnInput * rowInput;
    console.log(gridLength);
}

---

如果需要，您可以将console.log更改为alert，尽管console.log更好。

我认为唯一导致您出现问题的是onSubmit。它应该出现在表单元素中，而不是输入type=“submit”元素中。无论哪种方式，我都做了一些修改和测试，下面的工作正如您所希望的：

<form onsubmit="getGridLength();">
    <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="">
</form>
<script>
var tile = document.getElementById("tile");
var rowInput;
var columnInput;
var gridLength;

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
}

function getGridLength() {
    gridLength = columnInput * rowInput
    alert(gridLength);
}
</script>

x

var tile=document.getElementById（“tile”）；
变量输入；
var列输入；
变量网格长度；
函数rowValue（）{
rowInput=document.getElementById（'rowInput'）。值；
}
函数columnValue（）{
columnInput=document.getElementById（'columnInput'）。值；
}
函数getGridLength（）{
gridLength=columnInput*rowInput
警报（网格长度）；
}

---

除此之外，我建议使用逗号分隔符（；）结束每个Javascript命令，就像我在上面的代码中所做的那样。对于您将要使用的下一种编程语言来说，这也会更容易，因为大多数编程语言在命令结束时都需要它。

我认为导致您出现问题的唯一原因是onSubmit。它应该出现在表单元素中，而不是输入type=“submit”元素中。无论哪种方式，我都做了一些修改和测试，下面的工作正如您所希望的：

<form onsubmit="getGridLength();">
    <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="">
</form>
<script>
var tile = document.getElementById("tile");
var rowInput;
var columnInput;
var gridLength;

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
}

function getGridLength() {
    gridLength = columnInput * rowInput
    alert(gridLength);
}
</script>

x

var tile=document.getElementById（“tile”）；
变量输入；
var列输入；
变量网格长度；
函数rowValue（）{
rowInput=document.getElementById（'rowInput'）。值；
}
函数columnValue（）{
columnInput=document.getElementById（'columnInput'）。值；
}
函数getGridLength（）{
gridLength=columnInput*rowInput
警报（网格长度）；
}

---

除此之外，我建议使用逗号分隔符（；）结束每个Javascript命令，就像我在上面的代码中所做的那样。对于您将要使用的下一种编程语言来说，这将更容易，因为大多数编程语言在命令结束时都需要它。

将警报放在

getGridLength（）

中。当它在外部时，在页面加载时会立即调用它，因此它永远不会工作。请将警报放入

getGridLength（）

中。当它在外部时，它会在页面加载时立即被调用，因此它永远不会工作。啊，所以主要是语法问题，明白了！非常感谢。这对我很有效。啊，所以主要是语法问题，明白了！非常感谢。这对我有用。