How to implement onclick function directly in JavaScript code instead of html tag?

Question

The following link includes my project stored on codepen:

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

Previously I had onclick function located in html tag, however I want to make it working directly in JS code:

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");

After clicking on button1 and button2 I should see their tabs below them, but nothing appears. Would You gave advice how to modify the code?

Archie · Accepted Answer · 2020-01-16 14:48:30Z

2

Use EventTarget.addEventListener to bind a event to a Element. onclick doesnt work like this.

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

<button id="button1">Click Me</button>

If the first argument of the openTab("click", materialData) is the actual event object, then you should do something like this:

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

edited Jan 16, 2020 at 14:48

answered Jan 16, 2020 at 14:36

Archie

9114 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adan96ful Over a year ago

Ok it works. "materialData" should have been between quoatations. ;)

Archie Over a year ago

Oh I thought it is a variable declared on top. Glad it worked. Please close the question by marking the answer correct :)

Collectives™ on Stack Overflow

How to implement onclick function directly in JavaScript code instead of html tag?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related