Question

我是前端Web开发的新手，现在我正在使用javascript创建一个测试任务。这是我的html文件：

<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css"> </head> <body>
<h1>Lab: Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit" onclick="makeGrid()">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

<script src="designs.js"></script> </body> </html>

我的javascript文件：

function makeGrid() {


var rows=inputHeight; var cols=inputWeight; //Referencw for the body var body=document.getElementsbyTagName("body")[0];

//create a table element and a <tbody> element var table1=document.createElement("table"); var tableBody=document.createElement("tbody");

//creating cells for (var i=0;i<rows;i++){  //creating a table row  var R=document.createElement("tr");     for(var j=0;j<cols;j++){        //create a table data element       var C=document.createElement("td");         R.appendchild(C);


    }   //adding the row to the end of the table body
     tableBody.appendChild(R); } //putting the <tbody> in the <table> table1.appendChild(tableBody); //appending <table> into <body> body.appendChild(table1);

}

我应该通过提交按钮获取行和列的用户输入，并根据该规范生成一个表。到目前为止，我的attmepts不成功，更准确地说，当我点击提交时，没有任何反应，值返回到＆＃ 34; 1＆＃34;

我非常感谢您的指导和反馈。

Answer 1

您不需要<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Navbar</a> </div> <div id="navbar" class="collapse navbar-collapse bg-section1"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Section 3</a> <ul class="dropdown-menu"> <li><a href="#section3_1">Section 3.1</a></li> <li><a href="#section3_2">Section 3.2</a></li> <li><a href="#section3_3">Section 3.3</a></li> </ul> </li> </ul> </div> </div> </nav> <section id="section1"> <h2>Section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p> </section> <section id="section3_1"> <h2>Section 3.1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p> </section> <section id="section3_2"> <h2>Section 3.2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p> </section> <section id="section3_3"> <h2>Section 3.3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p> </section> </body>。没有什么可以提交的。
使用<form>
您已经拥有HTML中的document.getElementById。参考吧！
因此您不需要<table id>参考。
要检索整数，请使用document.body，因为输入parseInt( number, radix )是一个字符串
在添加新内容之前，先从现有内容中清除您的表格。
使用value代替内联JavaScript（addEventListener(EventName, callback)）
重量不是宽度！

onclick

function makeGrid() {

  var ELTable       = document.getElementById("pixelCanvas"); // You already have it!
  var ELInputHeight = document.getElementById("inputHeight");
  var ELInputWidth  = document.getElementById("inputWidth");
  var rows = parseInt(ELInputHeight.value, 10);
  var cols = parseInt(ELInputWidth.value, 10);  // Weight? you mean Width!

  ELTable.innerHTML = ""; // Empty table before inserting new stuff

  var tbody = document.createElement("tbody");
  
  for (var i = 0; i < rows; i++) {           // N rows...
    var R = document.createElement("tr");    // Make row.
    for (var j = 0; j < cols; j++) {         // N cells...
      var C = document.createElement("td");  // Make cell.
      R.appendChild(C);                      // Insert cell into row.
    }
    tbody.appendChild(R);                    // Insert row into tbody
  }
  
  ELTable.appendChild(tbody);                // Insert tbody into table
}

document.getElementById("makeGrid").addEventListener("click", makeGrid);

td { padding:10px; background:#000; }

Answer 2

我创建用于生成表的主体的函数，以及用于的监听器

＆＃13;

function createTableBody(height, width) {
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    let docFr = new DocumentFragment();
    for (let i = 0; i < width; i++) {
        tr.append(td.cloneNode());
    }
    for (let i = 0; i < height; i++) {
        docFr.append(tr.cloneNode(true));
    }
    return docFr;

}
let table = document.getElementById('pixelCanvas');
let createTableButton = document.getElementById('createTableButton');
let inputHeight = document.getElementById('inputHeight');

let inputWidth = document.getElementById('inputWeight');
createTableButton.addEventListener('click', () => {
    let parentTable = table.parentNode;
    let tableClone = table.cloneNode();
    parentTable.replaceChild(tableClone, table);//clear old table
    table = tableClone; 
    tableClone.append(createTableBody(inputHeight.value, inputWidth.value));
    // if you need , you can add ajax request 
    console.log(table)
});

＆＃13;

<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css"> </head> <body>
<h1>Lab: Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="button"  id="createTableButton">
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
 </body> </html>

＆＃13;

＆＃13; 如果您需要向服务器发送数据，可以使用ajax，并将submit替换为button，删除form。

Answer 3

试试这个：

<form id="form-grid" method="post" onsubmit="makeGrid()">
    <h2 id="grid-size">Choose Grid Size</h2>
    <label for="inputHeight">Grid height:</label>
    <input type="number" id="inputHeight" name="height" min="1" value="1" aria-describedby="grid-size" />

    <label for="inputWeight">Grid width:</label>
    <input type="number" id="inputWeight" name="width" min="1" value="1" aria-describedby="grid-size" />

    <h2>Pick a color</h2>
    <label for="colorPicker">Color:</label>
    <input type="color" id="colorPicker" name="color" />

    <input type="submit" value="Make Grid" />
</form>

<div id="pixelCanvas"></div>

请注意这里添加了明确的label。这些对于可访问性很重要！

我在表单中添加了一个提交处理程序，并将其从按钮中删除。我发现它更清洁，但你的方法最终也会起作用。

然后在您的designs.js文件中，您可能有：

function makeGrid(event) {
    event.preventDefault(); // prevents the form from submitting

    var form = document.querySelector('#form-grid');
    var rows = form.querySelector('#inputHeight').value;
    var cols = form.querySelector('#inputWeight').value;
    var wrapper = document.querySelector('#pixelCanvas');

    var table = document.createElement('table');

    for (var r = 0; r < rows; r++) {
        var tr = table.insertRow();
        for (var c = 0; c < cols; c++) {
            var td = tr.insertCell();
        }
    }

    wrapper.appendChild(table);
}

一些提醒：

使用label将表单字段与其可见标签相关联。这对于屏幕阅读器等辅助技术是必要的。
考虑使用fieldset对所有选项进行分组，从而提高其可访问性。

祝你好运！

Answer 4

正如@Katamari所说，看起来你没有正确访问这些元素并获得它们的价值。

要访问元素，您可以使用document.querySelector并传入CSS选择器。

var rowInput = document.querySelector("#inputHeight");
var colInput = document.querySelector("#inputWidth");

由于您已分配ID，因此可以使用document.getElementById

var rowInput = document.getElementById("inputHeight");
var colInput = document.getElementById("inputWidth");

无论哪种方式，如果找不到该元素，您将获得一个元素或null。获得元素后，只需获取value属性即可获得用户结果。

var rows = rowInput.value;
var cols = colInput.value;

如果要避免因找不到元素而导致的错误，可以在引用该值之前检查元素。

var rows = 1;
var cols = 1;

if (rowInput) {
    rows = rowInput.value;
}

if (colInput) {
    cols = colInput.value;
}

可以使用tenary operator

将其转换为单行

var rows = rowInput
    ? rowInput.value
    : 1;
var cols = colInput
    ? colInput.value
    : 1;

使用JavaScript

4 个答案: