Question

var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addformtopage() {

  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";

  cancelform = document.getElementById('cancel');
  submit = document.getElementById('submitproduct');

  document.getElementById('panel').appendChild(form);
}

function removebuttons() {
  rem.setAttribute("hidden", true);
}

function showbuttons() {
  rem.removeAttribute("hidden", false);
}


btnform.addEventListener('click', function() {
  addformtopage();
  removebuttons();
});
cancelform.addEventListener('click', function() {
  showbuttons();
});
submit.addEventListener('click', function() {

});

<!DOCTYPE HTML>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <title>
    JS Form
  </title>
</head>

<body>
  <div id="main">
    <p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
  </div>
  <div id="panel">

  </div>
  <div id="listing">

  </div>
  <script src="script.js"></script>
</body>

</html>

我是javascript新手，正在尝试这个小项目，我正在其中向HTML文件添加HTML元素。首先，页面显示两个按钮。然后，在我们单击“添加产品”后，将显示刚刚添加的表单，并且隐藏了先前显示的按钮。我必须在表单中添加验证，但是我现在还没有达到这一步。现在，表格中的按钮无法正常工作。好吧，他们根本没有工作。有人可以告诉我代码中的问题吗？帮助将不胜感激。

Answer 1

在查询元素之前，您将必须等待将元素添加到DOM中。

var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addformtopage() {

  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";


  // This line needs to be before...
  document.getElementById('panel').appendChild(form);

  // ...these lines
  cancelform = document.getElementById('cancel');
  submit = document.getElementById('submitproduct');
}

function removebuttons() {
  rem.setAttribute("hidden", true);
}

function showbuttons() {
  rem.removeAttribute("hidden", false);
}


btnform.addEventListener('click', function() {
  addformtopage();
  removebuttons();

  // Since cancelform & submit are created inside the addformtopage method
  // These method calls needs to be inside the event handler. 
  // Otherwise both cancelform & submit would be undefined, and you can't call methods on an undefined value
  cancelform.addEventListener('click', function() {
    showbuttons();
  });
  submit.addEventListener('click', function() {

  });
});

<div id="main">
  <p>
    <button id="clicktoadd">Add Product</button>
    <button id="clicktoshow">Show List</button>
  </p>
</div>
<div id="panel"></div>
<div id="listing"></div>

Answer 2

以下是如何将事件监听器添加到按钮的示例：

(local)

document.querySelector('#clicktoadd').addEventListener('click',() => {
console.log('add button clicked')
})

document.querySelector('#clicktoshow').addEventListener('click',() => {
console.log('show button clicked')
})

强文本

Answer 3

此处存在一些逻辑错误

cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
document.getElementById('panel').appendChild(form);

cancelform和submit将返回null，因为尚未将form添加到文档中。

动态制作的html无法通过javascript变量访问

3 个答案: