Question

我是初学者，我正在尝试使用表单收集数字，这些数字将是我的电子表格中的列数和行数，我创建了一个表单来收集此信息：

<form>
        number of rows? 
            <br>
            </br>
        <input type="number" id="rows" name="rows" value="" />
            <br>
            </br>       
        number of columns? 
            <br>
            </br>
        <input type="number" id="cols" name="cols" value="" />
            <br>
            </br>
        <input type="submit" value="submit" />
        </form>

我尝试使用：

let row = document.getElementById("rows")

let col = document.getElementById("cols");

将浏览器上添加的值作为我的列和行号但是它不起作用，我缺少什么？

Answer 1

您可以使用以下内容获取现有输入字段的值：

var row = document.getElementById("rows");
var rowValue = row.value;

要测试：alert(rowValue);

Answer 2

您缺少.value属性。它需要看起来像这样：

document.getElementById("rows").value;

或者 - 如果您使用的是jQuery，只需val();

Answer 3

成为初学者是可以的。每个人都从某个地方开始......;）

请考虑以下建议：

不使用<br>进行演示。改用CSS。
添加链接到表单字段的标签。
等待让DOM准备就绪。使用IIFE是一个聪明的选择。
声明事件侦听器以检测点击次数并在处理程序中执行某些操作。
使用 preventDefault()可在单击提交按钮时避免浏览器重定向。

这是一个有效的例子：

(function () {
  var rows = document.getElementById('rows'),
      cols = document.getElementById('cols'),
      submit = document.querySelector('input[type="submit"]');
    
  submit.addEventListener('click', handler, false);
  
  function handler(e) {
    e.preventDefault();
    console.log("Rows: " + rows.value);
    console.log("Columns: " + cols.value);
  }
})();

form {
  display: flex;
  flex-direction: column;
  align-items: left;
}

<form>
  <label for="rows">Number of rows?</label>
  <input type="number" id="rows" name="rows" value=""> 
        
  <label for="cols">Number of columns?</label> 
  <input type="number" id="cols" name="cols" value="">

  <input type="submit" value="submit">
</form>

将我的html表单连接到我的js

3 个答案: