Question

我是JavaScript世界的新手。似乎每次我点击添加更多，第一个克隆不使用我的点击我的功能，但第一个克隆后的每个克隆我可以使用我的点击我的功能，如原始。我做错了什么？

也请vanilla JS回答。我想学习没有捷径！

更多详细信息：当我点击“单击我”按钮时，它假设需要执行所需的部分/初始部分*金额（全部在函数转换中）。当我点击添加更多时，我希望它添加它所做的元素的克隆，但由于某种原因，第一个克隆不会让我使用click me功能，但在此之后每个克隆都会使用。

＆＃13;

function gallonToCup(gallon) {
  var gallon = gallon;
  var quart = gallon * 4;
  var cup = quart * 4;
  return "you need to use " + cup + " " + "cups";
}

function quartToCup(quart) {
  var quart = quart;
  var cup = quart * 4;
  return "you need to use " + cup + " " + "cups";
}

function pintToCup(pint) {
  var pint = pint;
  var cup = pint * 2;
  return " you need to use " + cup + " " + "cups"
}

function poundToOz(lb) {
  var lb = Lb;
  var oz = lb * 16;
  return " you need to use " + oz + " " + "ounces"
}

function flozTotbsp(fl) {
  var fl = fL;
  var tbsp = fl * 2;
  return " you need to use " + tbsp + " " + "tbsp"
}

var convertIt = document.getElementById("convertThis").onclick = convert;

function convert() {
  var dp = document.getElementById("dp").value;
  var ip = document.getElementById("ip").value;
  var am = document.getElementById("portionControl").amount.value;
  document.getElementById("converted").innerHTML = (dp / ip) * am;
  var size = document.getElementById("size").value
  if (size == "gallon") {
    document.getElementById("converted").innerHTML = (dp / ip) * am * 16 + " cup";
  }
}
var addMore = document.getElementById("yeah").onclick = clone;

function clone() {

  var fill = document.getElementById("portionControl");
  var clone = portionControl.cloneNode(true);
  clone.id = "";
  var container = document.getElementById("wrapper");
  container.append(clone);
  convert();

}

＆＃13;

body {
  background-color: purple;
  margin: 0;
  padding: 0;
}

#title {
  text-align: center;
  color: pink;
  border: 5px solid;
  padding: 10px 0;
  margin: 0 0 10em 0;
}

#wrapper {
  width: 65%;
  margin: 0 auto;
}

#converted {
  display: inline-block;
  border: 4px solid pink;
  padding: 5px 10px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="convert.css">
  <title> Convert Portion</title>
</head>

<body>
  <h1 id="title">Brenda Recipe Conversion Site</h1>
  <input id="yeah" type="button" value="Add more" onclick="clone">
  <div id="wrapper">
    <form id="portionControl">


      <input type="text" placeholder="items" value="">
      <input name="amount" type="text" placeholder="amount needed" value="">
      <select id="size">
       	 <option  value="fluid-ounces" name="hi" >fl oz</option>
       	 <option value="teaspoon">ts</option>
         <option value="tablespoon">tbsp</option>
       	 <option value="pint">pt</option>
       	 <option value="cup">cup</option>
       	 <option value="quart">quart</option>
       	 <option value="gallon">gal</option>
         <option value="oz">ounces</option>
       	 <option value="lb">lb</option>
       </select>
      <input id="ip" type="text" placeholder="intial portions">
      <input id="dp" type="text" placeholder="desired portions">
      <input id="convertThis" type="button" value="click me" onclick=""></input>
      <p id="converted">You need </p>
    </form>
  </div>
  <script src="convert.js"></script>
</body>

</html>

＆＃13;

Answer 1

使用以下代码：

var convertIt = document.getElementById("convertThis").onclick = convert;

你只是将你的onclick-event添加到第一个（和最初的）＆＃34;点击我＆＃34; - 按钮。

cloneNode()

不复制您的事件侦听器（来自第一个和初始按钮）。您必须使用clone()方法将onclick-event添加到新克隆中。

Answer 2

我有一个示例演示来解释你必须采取的方法;使用class而不是id;

document.getElementsByClassName将返回一个我们将迭代并添加事件监听器的数组。

每当我们克隆一个按钮时，我们将触发一个函数addListeners将为所有按钮添加事件监听器;

纯粹的javascript;没有jquery

＆＃13;

window.onload = addListeners();

function addListeners() {
  let buttons = document.getElementsByClassName("clickButton");
  for(i=0;i<buttons.length;i++) {
     buttons[i].onclick = function() {
        alert("button clicked");
     }
  }
}

document.getElementById("clone").onclick = function() {
   let button = document.getElementsByClassName("clickButton")
   let clonedbutton = button[0].cloneNode(true);
   document.getElementById("buttonWrapper").appendChild(clonedbutton);
   addListeners();
}

＆＃13;

<div id="buttonWrapper">
<button class="clickButton">
click me
</button>
</div>

<button id="clone"> Clone Button </button>

＆＃13;

Answer 3

这里有很多问题。

您尝试按ID获取值，但每个cloned container的ID不是唯一的。当按id搜索元素时，它会在DOM中解释，并在符合给定条件的值时返回。

＆＃13;

const elem = document.getElementById('amount');

console.dir(elem.attributes['data-v'].value);

＆＃13;

<div id="amount" data-v="5"></div>
<div id="amount" data-v="4"></div>
<div id="amount" data-v="6"></div>
<div id="amount" data-v="10"></div>

＆＃13;

这将始终生成5，因为它是第一个符合条件element.id==='amount'的元素。您正在克隆div#wrapper元素，但此克隆的子元素会保留其ID。

另一个问题是克隆的click me按钮未被深度克隆，它不会保留onclick侦听器

＆＃13;

const elem = document.getElementById('clone');

elem.addEventListener('click', (e) => {
const {target} = e;

document.body.appendChild(target.cloneNode(true));
});

＆＃13;

<button id="clone">clone me</button>

＆＃13;

该按钮将自行克隆，但单击克隆按钮时，您将看不到任何事情。这是因为click侦听器未被保留。

Onclick clone / function并不总是触发click处理程序

3 个答案: