Question

相当直接的前进。单击事件后，我的按钮没有创建我需要的输入。我需要填写班级＆＃34;家庭＆＃34;是。我不能只编辑HTML的Javascript。有什么想法吗？

HTML：

        <ol class="household"></ol>
        <div>
            <button class="add">add</button>
        </div>

JS：

    document.getElementsByClassName("add").onclick = function() {
        createinput()
    };

    count = 0;
    function createinput() {
        field_area = document.getElementsByClassName('household')
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = 'field' + count;
        input.name = 'field' + count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

Answer 1

document.getElementsByClassName为您提供具有所有给定类名的所有子元素的对象。您必须通过迭代数组或使用索引来附加每个元素的事件。

在这里，您可以使用document.querySelector作为示例，它返回与选择器匹配的第一个Element。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

document.querySelector(".add").onclick = function() {
  createinput()
};

count = 0;

function createinput() {
  field_area = document.querySelector('.household')
  var li = document.createElement("li");
  var input = document.createElement("input");
  input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  li.appendChild(input);
  field_area.appendChild(li);
  //create the removal link
  var removalLink = document.createElement('a');
  removalLink.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode)
  }
  var removalText = document.createTextNode('Remove Field');
  removalLink.appendChild(removalText);
  li.appendChild(removalLink);
  count++
}

<ol class="household"></ol>
<div>
  <button class="add">add</button>
</div>

Answer 2

它应该是document.getElementsByClassName("add")[0].onclick 作为Document.getElementsByClassName（）：

返回具有全部子元素的所有子元素的类数组对象给定的类名。当调用文档对象时，搜索完整文档，包括根节点。你也可以在任何元素上调用getElementsByClassName（）;它只会返回作为指定根元素的后代的元素给出类名。

document.getElementsByClassName("add")[0].onclick = function() {
        createinput()
    };

    count = 0;
    function createinput() {

        field_area = document.getElementsByClassName('household')
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = 'field' + count;
        input.name = 'field' + count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

<div>
            <button class="add">add</button>
        </div>

Answer 3

x.getElementsByClassName()

getElementByClassName返回一个集合。

x.onclick

onclick适用于单个元素，不能直接应用于集合。这就是你的代码无效的原因。

如果你想使用一个集合，那么一个循环可以按照其他答案之一的建议工作。

我想看看你想要采用的方法，看看this answer .getElementsByClassName（）。

Javascript onClick不能使用按钮

3 个答案: