Question

我正在学习自己的JS，并创建了第一个小脚本:)。脚本正在计算网页标记tittle的标记数量在50到60之间等等....下面有一个按钮可以重置脚本中的所有数据并且它的工作率为100％但是我有一个问题 - 可以我使用某种循环而不是我创建的代码？一个循环将重置下面的所有元素。谢谢你的帮助:)和建议......

// reset Title tag check
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  document.getElementById('inputTitleTag').value = "";
  document.getElementById('titleTag').innerHTML = "";
  document.getElementById('example').innerHTML = "";
  document.getElementById("tytul").style.color = "";
  document.getElementById("good").innerHTML = "";
});

Answer 1

虽然我认为在这种情况下循环是不必要的，但你可以这样做：

// reset Title tag check
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  var tags = ['titleTag', 'example', 'good'];
  for(var i = 0; i < tags.length; i++){
    document.getElementById(tag).value = "";
  }
  document.getElementById('inputTitleTag').value = "";
  document.getElementById("tytul").style.color = "";
});

Answer 2

是的，可以通过循环来完成：

var resets = [
  {id: 'inputTitleTag', props: ['value']},
  {id: 'titleTag', props: ['value']},
  {id: 'example', props: ['innerHTML']},
  {id: 'tytul', props: ['style', 'color']},
  {id: 'good', props: ['innerHTML']}
]
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  resets.forEach(function(reset) {
    reset.props.length === 1 ? document.getElementById(reset.id)[reset.props[0]] = "" : document.getElementById(reset.id)[reset.props[0]][reset.props[1]] = "";
  });
});

Answer 3

您可以将这些ids组合在一个数组中，然后遍历数组以执行类似的操作。

由于inputTitleTag和tytul不与其他人共享操作，因此循环使用它们毫无意义。

document.getElementById("resetTitleBtn").addEventListener("click", function(){
  var ids = ['titleTag', 'example', 'good'];
  document.getElementById('inputTitleTag').value = "";
  document.getElementById("tytul").style.color = "";
  ids.forEach(function(id){
      document.getElementById(id).innerHTML = "";
  });
});

Answer 4

如果你担心的是更干燥。或者do not repeat yourself然后您可以为一些常用功能添加别名。然后，当注意到诸如所有三个相同道具的模式时，循环机制也是很好的。通常两个或更少的相同道具对于一个循环是没有意义的，因为最小循环通常是2-3行来声明。

const clear = (element, prop) => element[prop] = "";
const get = (id) => document.getElementById(id);

get("resetTitleBtn").addEventListener("click", () => {
  ['titleTag', 'example', 'good'].forEach(id => clear(get(id), 'innerHTML'));
  clear(get('inputTitleTag'), 'value'));
  clear(get('tytul').style, 'color'));
});

这并不一定能改善这段代码，但在整个项目中可能会导致常用功能更加干燥。

Answer 5

您可以考虑使用类来识别需要通用初始化的不同元素，并以这种方式选择它们。

var resetValueEls     = document.getElementsByClassName('initValue');
var resetInnerHTMLEls = document.getElementsByClassName('initInnerHTML');
var resetColorEls     = document.getElementsByClassName('initColor');

Array.prototype.forEach.call(resetValueEls,     function(x) {x.value     = ""})
Array.prototype.forEach.call(resetInnerHTMLEls, function(x) {x.innerHTML = ""})
Array.prototype.forEach.call(resetColorEls,     function(x) {x.style.color = ""})

然后，需要初始化的每个HTML标签获得一个类或其组合，例如， <DIV class="initInnerHTML initColor"/>。

此策略的好处是，如果您有许多标记要初始化，尽管有很多ID，您可以在初始化程序中跟踪少量类。

循环是一个很好的选择，而不是我创建的？

5 个答案: