Как реализовать функцию onclick непосредственно в коде JavaScript вместо тега html? - PullRequest
Новая
       89

Как реализовать функцию onclick непосредственно в коде JavaScript вместо тега html?

0 голосов
/ 16 января 2020

Следующая ссылка включает мой проект, сохраненный на codepen:

[https://codepen.io/adan96/pen/ExaRgOe?editors=1010]

Ранее у меня была функция onclick, расположенная в теге html, однако я хочу, чтобы он работал прямо в JS код: 

document.getElementById("requestTypeSelection").selectedIndex = -1;
document.getElementById("requestSubtypeSelection").selectedIndex = -1;
document.getElementsByClassName("batch")[0].selectedIndex = -1;
document.getElementsByClassName("batch")[1].selectedIndex = -1;

document.getElementById("button1").onclick = function() {openTab("click", generalData)};
document.getElementById("button2").onclick = function() {openTab("click", materialData)};

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    if (tabName != "generalData") {
      tablinks[0].style.backgroundColor = "#cfdeed";
    } else {
      tablinks[0].style.backgroundColor = "#8eb3dc";
    }
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

window.onload = function() {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById("generalData").style.display = "block";
  event.currentTarget.className += " active";
  tablinks[0].style.backgroundColor = "#8eb3dc";
};

var $select1 = $("#select1"),
  $select2 = $("#select2"),
  $options = $select2.find("option");

$select1
  .on("change", function() {
    $select2.html($options.filter('[value="' + this.value + '"]'));
  })
  .trigger("change");

После нажатия кнопки 1 и кнопки 2 я должен увидеть их вкладки под ними, но ничего не появляется. Вы бы дали совет, как изменить код?

1 Ответ

1 голос
/ 16 января 2020

Используйте EventTarget.addEventListener , чтобы связать событие с элементом. onclick не работает так. 

document.getElementById("button1").addEventListener("click", function() {
  console.log("Clicked");
});
<button id="button1">Click Me</button>

Если первый аргумент openTab("click", materialData) является фактическим объектом события, то вы должны сделать что-то вроде этого: 

document.getElementById("button1").addEventListener("click", function(event) {
  console.log("Clicked");
  openTab(event, materialData)
});
...