javascript 标签中没有按钮点击事件(Tampermonkey)

vyu0f0g1  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(158)

我做了包含按钮的单个选项卡。enter image description here

// Create the tab content
  const tabContent = document.createElement('div');

  // Add your desired content for each tab dynamically
  const tabContents = [
        '<button class="CodeButton" onclick="myFunction">Button1</button><br/><button class="CodeButton">Button2</button>'
  ];

function myFunction() 
{  
alert("test"); 
}

我的目标是在按下按钮后发生一些事情,例如。通知到来或者页面元素的大小改变。
不幸的是,我不能让它工作,使“点击事件”。我想这与标签是“容器”的事实有关。

gpfsuwkq

gpfsuwkq1#

这是因为你需要用括号调用函数:

onclick="myFunction()"   // Calling the function with parentheses "()"

这并不总是必要的,但在这种情况下,它是。运行下面的示例来测试它:

const tabContents = [
  '<button class="CodeButton" onclick="myFunction()">Button1</button>', 
  '<button class="CodeButton">Button2</button>'
]

function myFunction() {  
  alert("test")
}

function selectTab(event) {
  const tab = event.currentTarget
  const selectedTab = document.querySelector('.tab.active')
  selectedTab.classList.remove('active')
  tab.classList.add('active')
}

function addTabContent(tab) {
  const tab1ContentWrap = document.querySelector(tab + ' .tab-content')
  tab1ContentWrap.innerHTML = ''
  tabContents.forEach(content => {
    tab1ContentWrap.insertAdjacentHTML('beforeend', content) 
  })
}

addTabContent('.tab-1')
.tab-group {
  display: inline-flex;
  gap: 3px;
  position: relative;
  
  .tab {
    .tab-name {
      padding: 10px;
      background-color: #ccc;
      text-align: center;
      cursor: pointer;
    }
    .tab-content {
      padding: 10px;
      display: none;
      position: absolute;
      left: 0;
    }
  }
  
  .tab.active {
    .tab-name {
      border: 2px solid #555;
    }
    .tab-content {
      display: block;
    }
  }
}
<div class="tab-group">
  <div class="tab tab-1 active" onclick="selectTab(event)">
    <div class="tab-name">Tab 1</div>
    <div class="tab-content">Place content 1 here</div>
  </div>

  <div class="tab tab-2" onclick="selectTab(event)">
    <div class="tab-name">Tab 2</div>
    <div class="tab-content">Place content 2 here</div>
  </div>
</div>

相关问题