Question

所以我制作了一个应用程序，在坚果壳中，从用户那里获取尺寸并吐出表面区域，但它很快变得非常重复。

＆＃13;

function calc() {

  var dim1main = +document.getElementById("dim1main").value || 0;
  var dim2main = +document.getElementById("dim2main").value || 0;
  var mainSurA = dim1main * dim2main;
  
  var dim1mainD1 = +document.getElementById("dim1mainD1").value || 0;
  var dim2mainD1 = +document.getElementById("dim2mainD1").value || 0;
  var mainD1SurA = dim1mainD1 * dim2mainD1;
  
  // ...
  
  var dim1mainD6 = ...
  
  // ...
  
  var totalSurA = mainSurA + mainD1SurA ... + mainD6SurA;
}

＆＃13;

所以我的想法是隐藏数百个文本输入，直到用户想要它们为止，并且所有留空的内容都将为零，因此不会弄乱总数。我认为我可以安全地假设这是一个可怕的javascript。

我一直在寻找一种方法来多次运行一个函数，并将每个局部变量存储在某个地方供以后使用。我通过删除onClick上的输入值来玩数组，但每次使用.push运行该函数时，它都会用第二个值替换第一个值。我读过有关localStorage的内容，但我不确定这是我在寻找什么。有什么建议？对不起，如果这太模糊了。

我已经阅读过有关在对象和全局变量中存储数据的内容，但我听说过它会变得混乱。

Answer 1

您可以这样做的一种方法是隐藏许多元素，而不是在需要时动态创建新的输入元素。您可以为元素提供一个特定的类，您可以使用它通过HTMLCollection获取它并计算总维度。

例如：

document.getElementById('add').onclick = function() 
{
  var container = document.getElementById('container');
  var subContainer = document.createElement("div");
  var dim1 = document.createElement("input");
  var dim2 = document.createElement("input");
  dim1.className = "dim1";
  dim2.className = "dim2";
  dim1.value = dim2.value = 0;
  subContainer.className = "sub-container";
  subContainer.appendChild(dim1);
  subContainer.appendChild(dim2);
  container.appendChild(subContainer);
}

document.getElementById('calc').onclick = function()
{
  var arrayDim1 = document.getElementsByClassName('dim1');
  var arrayDim2 = document.getElementsByClassName('dim2');
  var totalSurA = 0;
  for (var i = 0; i < arrayDim1.length; i++) {
      totalSurA += +arrayDim1[i].value * +arrayDim2[i].value;
  }
  console.log(totalSurA);
}

<div id="container"></div>
<button id="add">Add Dimension</button>
<button id="calc">Calculate</button>

如存储过去的网页会话，您可以按照说明使用localStorage。我会在JavaScript中作为每个行项的2D数组（或者您可以使用具有dim1 / dim2 属性的对象数组），如下所示：

[
    [dim1_0, dim2_0],
    [dim1_1, dim2_1],
    ...
]

虽然在将其保存到本地存储空间之前，您需要使用文本格式，然后将其转换为使用JSON.stringify()

存储局部变量然后重新运行功能？

1 个答案: