动态访问按钮并创建列表Javascript

Question

好吧，所以我被卡住了。因此，当您输入年龄时，项目的细分是，当您单击添加时从下拉列表中选择一个选项，将创建一个列表并将该输入插入到列表中。我还要在页面的某个地方显示该列表。我希望我能正确解释。

无论如何，我一直在尝试创建一个新的div，以编程方式创建一个无序列表，并尝试在最后一个div下的正文中显示它，但是当我点击时，下面的代码没有执行添加按钮。顺便说一下，我无法编辑HTML，我也不能使用JQuery。我必须使用纯Javascript。任何提示或帮助都会很棒！

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";

var add = document.getElementsByClassName('add');
add.onlick = 'addToList()';


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function addToList() {
  var li = document.createElement("li");
  //li.setAttribute('id', age.value + dropDown.value);
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);

  return false;

}

<h1>Household List</h1>
<div class="builder">
  <o class="household"></o>
  <form>
    <div>
      <label>Age
          <input type="text" name="age">
        </label>
    </div>
    <div>
      <label>Relationship
          <select name="rel">
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
    </div>
    <div>
      <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

Answer 1

代码中存在一些语法错误，尤其是按钮单击事件处理程序。这是正确的代码。

＆＃13;

＆＃13;

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";

var add = document.getElementsByClassName('add');
add[0].onclick = addToList;


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function addToList() {
  var li = document.createElement("li");
  //li.setAttribute('id', age.value + dropDown.value);
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);

  return false;

}

＆＃13;

<h1>Household List</h1>
<div class="builder">
  <ol class="household"></o>
  <form>
    <div>
      <label>Age
          <input type="text" name="age">
        </label>
    </div>
    <div>
      <label>Relationship
          <select name="rel">
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
    </div>
    <div>
      <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的代码中存在许多问题

1. 所有for属性和输入属性都可以定义为html而不是使用js

2. button类型默认为提交，因此在button type="button"

中添加<button class="add">add</button>

3. add.onlick = 'addToList()';错误;该函数不是字符串，请将其替换为document.getElementsByClassName('add')[0].onclick = addToList;

＆＃13;
＆＃13;
var age = document.getElementsByName("age")[0];
var dropDown = document.getElementsByName("rel")[0];

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);


var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);

document.getElementsByClassName('add')[0].onclick = addToList;

function addToList() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);
  return false;

}
＆＃13;
<body>
  <h1>Household List</h1>
  <div class="builder">
    <o class="household"></o>
    <form method="POST" action="form-handler">
      <div>
        <label>Age
          <input type="number" name="age" min="0" max="120">
        </label>
      </div>
      <div>
        <label>Relationship
          <select name="rel" required>
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
      </div>
      <div>
        <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
      </div>
      <div>
        <button class="add" type="button">add</button>
      </div>
      <div>
        <button type="submit" class="GapViewItemselected">submit</button>
      </div>
    </form>
  </div>


</body>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您的HTML存在问题，您有o标签而不是订单列表标签。这可能会修复代码。此外，当您单击添加按钮时，表单将被发布，因此我将删除帖子直到结束。