Javascript 如何简化这个JS函数

是否可以将这两个功能合并为一个

我曾尝试在一个函数中使用多个选择器，但没有效果

我不熟悉香草JS。 提前谢谢你

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#closedview');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

document.addEventListener('DOMContentLoaded', function() {

   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#openedview');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);

    }
});

document.addEventListener（'DOMContentLoaded'，function（）{
var radioButtons=document.getElementsByName（'viewangle'）；
var段落=document.querySelector（“#closedview”）；
对于（var i=0；i

试着调用第1段（closedview）和第2段（openedview）：

document.addEventListener（'DOMContentLoaded'，function（）{
var radioButtons=document.getElementsByName（“视角”）；
var paragraph1=document.getElementById（“closedview”）；
var paragraph2=document.getElementById（“openedview”）；
对于（var i=0；i

将普通内容放在一个函数中，并将差异作为参数传递，如下所示：

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#closedview');
});

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#openedview');
});

function myFunction(viewId) {
  var radioButtons = document.getElementsByName('viewangle');
  var paragraph = document.querySelector(viewId);

  for(var i=0;i< radioButtons.length;i++) {
    var elem = radioButtons[i];
    elem.addEventListener('change',function(e){
      console.log(paragraph);
      if(paragraph.className) {
        paragraph.className = this.value;
      } else {
          paragraph.classList.add(this.value);
      }
    });
  }
}

document.addEventListener（'DOMContentLoaded'，function（）{
myFunction（“#closedview”）；
});
document.addEventListener（'DOMContentLoaded'，function（）{
myFunction（“#openedview”）；
});
函数myFunction（视图ID）{
var radioButtons=document.getElementsByName（'viewangle'）；
var段落=document.querySelector（viewId）；
对于（var i=0；i

或者结合@RobG的答案：将document.querySelector（）的结果传递给myFunction（）

---

PS:@Federico的答案实际上更干净更好：您只需添加1个eventlistener。。要加载DOMContentLoaded，是否使用jQuery？您已经对其进行了标记，但在代码中根本没有使用。您真的应该重命名该问题，这根本没有遵循堆栈溢出规则。您似乎只是在寻找合适的选择器，即

document.querySelectorAll（“#openedview，#closedview”）

将返回0到2个元素的集合，您可以使用for循环（如数组）对这些元素进行迭代。在OP的上下文中，

paragraph1.className=this.value

和

paragraph1.classList.add（this.value）

将执行完全相同的操作。如果段落1.className有任何值（即，是一个包含1个或多个字符的字符串），它将被此.value替换，如果它没有值（即，返回一个空字符串），则此.value将添加到空类列表中。所以不管怎样，它最终都是这个.value。还是我错过了什么？

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#closedview');
});

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#openedview');
});

function myFunction(viewId) {
  var radioButtons = document.getElementsByName('viewangle');
  var paragraph = document.querySelector(viewId);

  for(var i=0;i< radioButtons.length;i++) {
    var elem = radioButtons[i];
    elem.addEventListener('change',function(e){
      console.log(paragraph);
      if(paragraph.className) {
        paragraph.className = this.value;
      } else {
          paragraph.classList.add(this.value);
      }
    });
  }
}